https://github.com/tristanhollman/rr-fancy-time

Fun project for a time-themed hackathon at R&R WFM. Using React and ThreeJS to create a cool visualization of the current time.
https://github.com/tristanhollman/rr-fancy-time

hackathon-project reactjs threejs

Last synced: 23 days ago
JSON representation

Fun project for a time-themed hackathon at R&R WFM. Using React and ThreeJS to create a cool visualization of the current time.

• Host: GitHub
• URL: https://github.com/tristanhollman/rr-fancy-time
• Owner: tristanhollman
• License: mit
• Created: 2023-09-21T16:15:52.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-12-21T09:09:42.000Z (about 2 months ago)
• Last Synced: 2024-12-21T10:20:00.094Z (about 2 months ago)
• Topics: hackathon-project, reactjs, threejs
• Language: TypeScript
• Homepage: https://time.tristanh.dev/
• Size: 11 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rr-fancy-time

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Deploy to Github Pages](https://github.com/tristanhollman/rr-fancy-time/actions/workflows/nextjs.yml/badge.svg)](https://github.com/tristanhollman/rr-fancy-time/actions/workflows/nextjs.yml)

A small and fun project for a time-themed hackathon at [R&R WFM](https://github.com/rr-wfm). Using React and ThreeJS to create a cool visualization of the current time.

Got constantly sidetracked by cool and complex stuff involving GLSL shaders which I wasted most my time on, but also learned a lot. Probably will use them (and ThreeJS) again elsewhere.

If I didn't mess things up, it should be hosted on github pages [here](https://tristanhollman.github.io/rr-fancy-time) :)

I've also created a wallpaper on Wallpaper Engine (on Steam) so you can set the main scene, with the flying sakura petals, as your desktop background.

Not quite sure why you would want that, but as I wanted to try and make something for Wallpaper Engine anyways...you can!

It's a very basic version of the web app, without any configuration options whatsoever. (👉ﾟヮﾟ)👉 [link](https://steamcommunity.com/sharedfiles/filedetails/?id=3046705007)

![Preview](https://github.com/tristanhollman/rr-fancy-time/assets/8666039/04760251-3535-4dab-9d0a-62716b3b431e)

## Getting Started

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

First, run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Credits, Inspirations and Contributions

### Petal Shaders

I was inspired by one of [Paul's](https://codepen.io/prisoner849) CodePen projects and based some of the GLSL shader code on his amazing petal implementation :)

### Background images

Background images were either taken from [Unsplash.com](https://unsplash.com/) and/or generated/edited/upscaled with A.I. (StableDiffusion)

### Music

The song playing on the background is 'Sakura' by 'ANtarcticbreeze' and can be found [here](https://soundcloud.com/musicformedia-1/sakura-inspirational-hip-hop-lo-fi-no-copyright-claims-music).

## Todo's

- [x] Let the user toggle the background music from the UI.

- [x] Get the sakura petal as a wallpaper in [Wallpaper Engine](https://www.wallpaperengine.io/).