Lab / 03 · 6 examples
Motion
Small studies in how movement explains an interface: scroll, layout, text and data, each with a calmer version for reduced motion.
Showing 6 of 6
Architecture Bureau
A full landing page for a fictional architecture studio where every section uses GSAP motion: split headline, magnetic buttons, parallax facade, SVG draw and morph, a case study slider, a sketchbook grid, Flip filtering, counters, a crossfade carousel and an accordion.
GSAPScrollTrigger+5 more
Fragrance House
A landing page for a fictional perfume house: a glass flacon fills as you scroll while the top, heart and base notes pour in, each chapter raises its own coloured smoke, and a composer lets you drop ingredients into a flask and watch them blend.
GSAPScrollTrigger+4 more
Ostra Tidal 41
A launch page for a fictional dive watch in the Apple product-page pattern: 330 frames rendered offline from a watch modelled in code play on a 2D canvas as you scroll, with callouts that follow each part through a full turn, an exploded view, a dial close-up, a night chapter and a strap picker.
GSAPScrollTrigger+3 more
Lumora Sign-in
Sign-in and sign-up for a fictional creator platform: a WebGL nebula sky with twinkling stars, light, dark and system themes with a circular reveal, English, Ukrainian and Spanish, a text-size control, skeleton loading, live validation with email typo fixes and a password strength meter, an emailed code step and a dashboard that loads in.
ReactTypeScriptWebGL+3 more
Velvetry
A sales landing page for a fictional upholstery cleaning company that serves cafés, hotels and offices: a before/after sofa you drag to compare, a quote calculator with a rolling price, plans with a highlighted favourite, a guarantee, FAQ and a short booking form, all in plain HTML, CSS and SVG so it loads fast on any phone.
GSAPScrollTriggerSVG+1 more
03.1 · 1 tool
Generative tools
Design made by code: seeded systems drawn with p5.js that turn a few inputs into marks, palettes and patterns, rebuilt from a link and exported as SVG.
