WoodNest: Luxury Cabin Booking
Three phone screens of a fictional cabin-rental product: a featured-lodges list running looping video cards, a landing screen, and a reservation screen whose date fields open a real calendar with month navigation and in-range day states. All three float over a fixed field of four morphing blobs, three specular highlights, and a fractal-noise grain.
A self-directed demo built to practice AI-native delivery. Not a real product or client project.
Overview
WoodNest is a three-screen booking showcase for a fictional cabin rental. A featured-lodges list runs looping video cards, a landing screen carries the hero and rating, and a reservation screen holds a date-range picker and a check-in time selector that both work. The three phones sit over a fixed background of four morphing blobs, three specular highlights, and a fractal-noise grain.
Stack & what's notable
React 19, Vite, TypeScript, Tailwind CSS 4, lucide-react. There is no animation library: the blob field, the specular drift, the staggered entrance, and the amber pulse on the Book Now button are all CSS keyframes. The frosted panels are backdrop-filter at three blur depths, and the calendar is plain React state over a generated month grid.
The row of phones engages at 1304px rather than at Tailwind's md, because three 380px frames plus two 50px gaps plus the page padding is what 1304 measures, and below that they stack.
Project stack
React
UI library
TypeScript
Typed end to end
Vite
Build tool + dev server
Tailwind CSS
Utility-first styling
