Yosemite Site banner

Yosemite Site

5 devlogs
11h 12m 36s

A simple interactive landing webpage about Yosemite National Park with tons of cool animations, styling, effects, and other stuff related to the park and its natural scenery! (I did not use AI, just because it has gradient text doesn't mean it's v…

A simple interactive landing webpage about Yosemite National Park with tons of cool animations, styling, effects, and other stuff related to the park and its natural scenery! (I did not use AI, just because it has gradient text doesn’t mean it’s vibecoded)

This project uses AI

None

Demo Repository

Loading README...

Tony Hsu

Shipped this project!

Hours: 11.21
Cookies: 🍪 116
Multiplier: 10.39 cookies/hr

Finished making this simple, interactive, and visually interesting landing webpage for the famous Yosemite National Park! This was a CSS challenge for myself so I added a ton of different animations, effects, transitions, and other cool stuff using advanced CSS/Tailwind and libraries like Framer Motion. I also coded all the custom effects with vanilla CSS and JS, including the scrambled text hero title, waterfall animation, sun/moon transition, and the odometer count effect, and these all turned out a lot better than I expected, and the whole webpage looks nice as a whole too. There’s interactive navigation buttons, fun fact widgets, and an about section with an image gallery/carousel that showcases the national park even more. Overall, this was a pretty fun project, I’m not expecting a high multiplier (not useful at all lol), but I learned a lot and had a ton of fun experimenting with different visuals.

Tony Hsu

Added an image gallery carousel of Yosemite scenery and wildlife to the about section with 10 highly detailed quality photos! It also has a pretty cool animation transition for when you’re browsing the different photos and it feels super nice, like an actual image gallery carousel. Added two colorful widgets about Yosemite Falls and the Grizzly Giant sequoia tree as well. Also added responsive design for the entire page and a warning that only pops up on tiny screens saying bigger screen is recommended, because I’m too lazy to perfect and optimize all the animations, components, and effects. Added a more descriptive and informative README, as well as updated styling and page content. Updated favicon and page metadata and fixed some deployment issues too.

0
Tony Hsu

Added an absolutely beautiful (but not performant or realistic if you consider the physics and math behind it, but who cares, it looks nice) waterfall animation using pure vanilla CSS and JavaScript for the hero background! It comes out slowly at first from the top left corner, and gradually accelerates and changes course to simulate the real Yosemite Falls on one of the peaks. I spent a ton of time tweaking different values and formulas to make everything look smooth and as realistic as possible while still keeping the individual water drops for a cool aesthetic. Encountered a weird Tailwind bug after pushing to production so spent some time fixing that as well. This wasted a ton of time but the result was definitely worth it, and the waterfall also fades nicely into the rest of the page. Also added two paragraphs describing Yosemite and its wildlife, as well as a half-finished photo gallery/carousel thing with framer motion. The page actually looks pretty cool right now, and I think I’ll be done with this project after finishing the rest of the widgets.

0
Tony Hsu

Added two actual statistics widgets that link to NPS pages to the landing page so now they’re not just placeholders! The first one is the park’s annual visitors and the second is its wilderness land area. Spent a ton of time making my custom odometer simulation/animation engine (because I was too “lazy” to leverage framer motion’s hooks and other stuff that literally would have saved hours) that animates both the widgets’ digits going up at slightly different speeds that makes it look super satisfying and cool when the widget enters the viewport. Also had to do some prop drilling and annoying math to make the changing gradient work with all the digits (and their shadows) smoothly as well. Added a second type of hovering effect for the bottom 2 widgets (coming soon, they will be animated differently) that matches the overall gradient theme. Also updated some styling, effects, and scrolling animation issues. Encountered a pretty weird bug with the intervals because of strict mode and cleanup functions but fixed it with proper math.

0
Tony Hsu

Added widgets (with placeholder text for now) under the beautiful scenery section that will display icons, stats, and other info about the national park. Spent some time tweaking the cool random color gradient spinning hover effect/animation of the widgets to make sure Tailwind and everything work properly. The entire section pops out when scrolled into view Also added a paragraph that slides in from the side when in view. Also added a small simple footer at the bottom and updated the fonts used on the page to make everything more aesthetically pleasing and just look nicer. Updated some styling and layout stuff as well to make everything work together better. The amazing animation library Framer Motion was a huge help here with scrolling, hovering, and page load animations as well.

0
Tony Hsu

I’m taking a short break to work on this simple webpage about Yosemite National Park meant to be a challenge for CSS animations, effects, and interactivity! In this update, I spent some time setting up the project with React, TypeScript, Tailwind, Vite, and other libraries/dependencies needed. Added the classic text/symbol matrix glitch effect on the page hero title that glitches between characters until it slowly becomes legible. The algorithm was fun to implement and it looks pretty cool too. Added the Yosemite cliffs as the middle ground with a background that transitions between a gradient for moonlight and a gradient for sunrise. You can toggle day/night by clicking on the toggle button, and the sun/moon icon gets animated smoothly and realistically as well. Setting and animating the gradients was kind of annoying since browsers don’t support direct transitions so I had to use some workaround methods, but everything still turned out alright. Because this is a challenge for myself, I did not use AI at all whatsoever and all the ideas and code are completely original, and the result turned out pretty good, actually better than I expected since I thought implementing more complex animations than just CSS transition was going to be harder.

0