A responsive landing page for a fictional VR studio, built as a front-end exercise. No build step: plain HTML, one stylesheet, one script.
Stack
Tailwind CSS v4 via the browser CDN, with a small custom theme (@theme) for the colour palette and typography Motion (motion.dev) for entrance and scroll-triggered animations Swiper for the carousels Things I enjoyed building
Sliders that stop being sliders. Each carousel runs only below its own breakpoint; above it the Swiper instance is destroyed and the same markup falls back to a plain CSS grid. One matchMedia helper drives all four. Scroll reveals. Elements are marked with data attributes and grouped by container - one group plays on load, the rest wait for inView, each staggering its children in document order. SVG line drawing. The decorative arcs draw themselves using Motion's pathLength; the hero curves grow outwards from their own midpoints by animating pathLength and pathOffset together. Animated gradient text — a highlight layer sweeps across the headline while the base gradient stays put. Floating form labels driven purely by :placeholder-shown, no JavaScript. Every animation is disabled under prefers-reduced-motion, and the decorative SVGs are hidden from assistive tech.
Design inspired by https://www.figma.com/community/file/1196146735025729739 - the layout is theirs, the implementation is mine.
Top comments (0)