Changelog
316 effects so far. Grouped by the week they were added. RSS
WebGL E-bike launch template for an invented Rotterdam brand: a photo-real 3D bike rolls in, then the scroll tracks the frame, drops the battery, explodes the motor, swaps colours and counts the range.
WebGL A faceted glass perfume bottle with a brushed-metal cap stands on travertine. Slow sunlight throws a moving amber caustic through it; the cursor rocks the bottle on its base and the liquid sloshes on a spring.
WebGL A lathe-thrown vase, bowl and teacup turn slowly on an oak slab and travertine plinth in low window sun. Move the cursor to swing the window; pick one of six glazes. Matte speckled clay against clearcoat glaze.
WebGL A light launch page for invented Stillmere One headphones: a photo-real 3D pair rotates in, comes apart into seven parts, flattens a noise wave, changes colour and folds into its case, then specs, compare, pre-order bag and FAQ.
medium One incense stick in a glazed bowl of ash on ivory paper. A thin smoke ribbon rises straight from the ember, curls into turbulence and fades; move the pointer near it and your breath bends it. Six blends.
WebGL A light shop page for an invented Paris lipstick house: a photo-real gold lipstick pops its magnetic cap, twists, raises the bullet and walks through eight shades as you scroll, then real arm swatches, a shade finder, sets, refills and a bag.
WebGL Perfume-house template for an invented Grasse brand: a door of stars opens, the camera falls through moonlit cloud into a walled night garden, and each flower you open lifts a glass perfume flask from its heart.
WebGL Niche perfume house template: scroll moves the sun across a limestone table from dawn to night, past four photo-real glass flacons whose coloured shadows and caustics swing with the light.
WebGL Serum skincare template for an invented Copenhagen brand: a photo-real frosted dropper bottle; scroll lifts the glass pipette, gathers one drop, lets it fall and lands it as a real macro video.
WebGL Soft-drink launch site for a fictional cola: one photo-real 3D can spins in cold, cracks open, slices into six flavours, pours through each colourway and lands in the lineup.
medium Full-screen crushed velvet shaded fibre by fibre. Drag across it and the pile flips along your stroke, leaving lighter or darker trails that slowly lie back down. Eight colourways, light-first.
medium Aesthetic clinic template for a Liverpool skin clinic: light on water seen through a ring lamp, a find-your-treatment picker, a hover-reveal price list, a before/after loupe, the first-visit safety steps, clinicians and booking.
medium AI SaaS template for a meeting-notes assistant: scroll runs a live meeting while the transcript and notes write themselves, then features, meeting types, integrations, security, pricing and FAQ.
medium Architecture and interior design studio template for a Bristol practice: every photo starts as its own ink drawing and a build line reveals the building. Projects index, services, RIBA-style stages, fee estimate, FAQ and enquiry form.
medium Bakery café template for an Edinburgh sourdough bakery: the name proves like dough over an oven video and opens the page, then bake times, menu, a working pickup basket, wholesale, hours and map.
medium Boutique hotel template for a 12-room hotel on Procida: green louvred shutters open onto the sea, then a day told slat by slat, a live stay picker with prices, experiences, dinner, getting here and booking.
medium Branding agency template for a Hamburg brand studio: its name printed in four ink plates that scroll into register over a showreel that bleeds to full screen, a work index that prints previews in four passes, services, process, FAQ and a brief form.
medium Fashion store template for a Marseille linen label: a full-bleed video of linen on a washing line, the brand name pegged on a swinging cord, a pinned line of products, quick view, a working bag, size guide and lookbook.
medium Financial planner template for an independent adviser in York: the horizon rises into a growth line over a misty valley, a life line from 38 to 78, a retirement calculator that draws your line, fixed fees as rising steps, advisers and booking.
medium Gym template for a Sheffield strength & conditioning club: a 20 kg plate rolls in with a deadlift inside and grows to full bleed; classes, a timetable that loads a barbell, coaches, prices, map and a free-trial form.
medium Hair salon template for a cut-and-colour salon in Glasgow: a comb draws a parting and the page falls open like hair over a blow-dry video, then lookbook, prices by stylist level, look picker, team, booking, hours and map.
medium Mobile app landing template for a plant care app: the phone's camera escapes the phone and names a plant, then features, a live tap-through app, plant index, rating, pricing, FAQ and a QR download.
medium Online course template for a photography school: the hero video pulls into focus as you scroll, then course catalogue with filters, find-your-course path, a depth-of-field lesson, pricing and signup.
medium Real estate template for an Edinburgh estate and letting agency: a sash window over a hazy aerial clip, a window that grows into a room-by-room walk-through, a hover-reveal listings list, mortgage + LBTT calculator, areas, valuation and viewings.
medium Restaurant template for a Basque wood-fire grill and wine bar in Bristol: the fire burns the page open over a grill video, then menu, txuleta calculator, booking, cellar room, hours and map.
medium Roofing contractor template for a Bristol roofer: a drone clip inside a pitched gable that lifts to full bleed, priced services, a roof quote estimator, rain and guarantees, before/after, areas, FAQ and a quote form.
medium Skincare store template for a Barcelona brand that sells by texture: the name written in a swatch of cream, five textures swatched across the screen, a shop with quick view and bag, and a routine finder.
medium Used car dealer template for a Leeds showroom: odometer drums carry every number, a road clip opens to full bleed, filterable stock with quick view, a PCP/HP finance calculator, promises, test-drive booking, FAQ and hours.
medium Wedding photographer template for a North Wales duo: the page is a lens iris that opens onto a beach film, opens each of three weddings, sizes the packages and answers a live date checker.
medium Yoga and pilates studio template for a Cardiff studio: the page breathes, a circle of light inhales and exhales over a class video, then a timetable you build your week from, prices, booking and a breathing guide.
medium A light, type-led agency landing page: the studio name fills the first screen and squashes with scroll speed, then six pinned case panels letter each client's SVG wordmark beside its photo, with a hover/slider weight axis.
medium Accounting and bookkeeping firm site: fixed monthly prices, a 'What will it cost?' quote builder with a tweened fee, UK tax dates counted down from today, and margin notes that write themselves in.
medium A light landing page for an invented nine-seat island airline: set two islands and today's wind and a split-flap board flips to the flight time, the aircraft and GO or HOLD; every section is another row of the board.
medium A light landing page for a seafarer remittance service built as the allotment slip itself: a stack of slips, a dotted route that draws to Manila Bay while the slip types itself and is stamped, and a live chart slip.
medium Book cover and editorial design studio template: every jacket enters as the 4 cm pencil scamp it began as and grows into the cover, with real-photo services, a four-step process, a cover desk, rates, FAQ and a project form.
medium A light village-house sales page built as a specimen plate: 63 stone houses drawn to one scale draw themselves in ledger order, sold ones are ruled through, and any house flips to a full survey sheet you can reserve.
medium A light landing page for an invented Florentine glove workshop: 27 drawn pattern pieces tile the hero, sit named on a pinned plate, then fly into one glove as its points are sewn; a chalk hand trace gives your quarter size.
medium Building materials template: a Dutch brick and paver supplier with prices per 1,000 and per m², a hero photo laid brick by brick, free sample picker, a live test-wall calculator, projects, delivery zones, FAQ and a quote form.
medium A dental clinic site that sells itself: SplitText hero with live Next-available slots, a photo band that opens to full-bleed, a Find-your-shade whitening slider, a 0% finance calculator, a pinned first-visit story, a reviews marquee and a self-drawing map.
medium Car detailing and ceramic coating site for a Leeds studio: prices that change with car size, a before/after paint-correction slider, a pinned process track, a filterable gallery, a postcode map and a booking builder.
WebGL A light landing page for an invented Atacama stargazing lodge: a pinned adobe dome cranks its slot open on scroll onto a WebGL sky of 40,000 stars turned to the night you pick, then domes, a year of skies, the log, a ticket and FAQ.
medium Coach and personal-brand website template for a leadership coach: highlighter hero with live discovery-call slots, priced programmes, a 'Which programme fits you?' radar quiz, method, sample results, free guide and a booking calendar.
light A sleeper-train landing page where the route's altitude line is the spine: the title holds while the line draws and a train rides it, every section's top edge is its own stretch of the climb, and a ticket shows your sunrise.
medium Crop-monitoring SaaS landing page: a plain hero with a real field photo and the product's scouting-pin card, an aerial photo read layer by layer, a live 81 × 81 vigour map you can type a quarter into, plans with an April/monthly switch, integrations and FAQ.
medium An onggi-jar landing page where scrolling runs a jar of doenjang through 1,000 days: the cut-away contents ripen green to brown and an orchid draws itself; a kiln ticket picks your jar.
medium A light landing page for an invented Welo-opal cutting house in Addis Ababa: every stone is a GLSL shader that flashes harlequin, broad-flash or pinfire as you tilt or move across it, and a draggable water drop turns any stone glassy.
medium Feature-flag SaaS landing page: a plain hero over a real team photo with a live flag card, a lever-and-dial rollout demo, team photos, code tabs, integrations, three priced tiers with a monthly/yearly lever, FAQ and a demo form.
WebGL A light, playful landing page for an invented fuzz-pedal maker in Fitzroy, sold like a weather report: turn the 3D pedal's Weather knob from Clear to Hailstorm and the isobar map, waveform, headline and sky all change.
WebGL A light landing page for an invented Florø cabin maker: snap 2–7 spruce modules onto a procedural 3D granite slope, watch each one craned onto screw piles, and read area, price, piles, ferry crossings and crane minutes update.
medium A light neobank landing page for Lofoten cod fishers: drag the season's catch and a drying rack fills with fish pairs, then a pinned scroll story spreads the winter's landings into twelve equal salaries.
WebGL A light landing page for an invented Baltic amber parfum house: a Three.js amber nugget on the sea horizon, a scroll dive into the resin onto a gnat's wing, a draggable amber that turns through four parfums, then flacon, house, collectors, prices.
WebGL A light landing page for an invented Detroit turntable: scroll spins a 3D cast-iron platter to 33⅓ with inertia, then you drag the tonearm onto five avenue-grooves and a generated loop plays at the platter's speed.
medium Hair salon website template: a SplitText hero with live free chairs, a price list by stylist level, a look picker that combs in a matching photo with price and time, a Flip lookbook, booking form and map.
WebGL A light DTC shop for an invented Porto pottery: a 3D glazed mug rises through the giant HALDE wordmark and settles on a plate as you scroll; pick a glaze and every piece re-glazes with a dip wipe; drag tiles to turn them.
medium A light dance-poster landing page for an invented Kingston drum-machine studio: the page is a stack of speaker-box tiles whose 3D cones pump to a 16-step riddim you programme, with a procedural Stack-16 lighting its pads and a Version dub mode.
WebGL A light landing page for an invented Norwegian glass studio: a Three.js glass float fills with clipped, sloshing fjord water to today's tide as you scroll, a draggable tide clock refills it hour by hour, then shop, stages, pricing ticket and FAQ.
medium A light landing page for a fictional Seoul compact-kitchen maker where the page width is the 1,800 mm wall: drag modules on a live plan, walk the pinned elevation as each module rises onto its mark, then prices, a fitting slip and FAQ.
medium A light perfume-house landing page: blossoms detach from a drawn Seville street and settle into the brand name; the street map is the scroll path, with a draggable pin that plays each street's blossom; perfumes, still room, prices, FAQ.
medium A light specimen-catalogue landing page for a fictional Takayama joinery: a wall of 3D nail-free joints, a bench where you drag one apart and it snaps shut, twelve plates that open on scroll, a pinned table assembly and a price menu.
medium A light, tiled landing page for a Hanoi cement-tile workshop: a 6 × 6 floor flips in on a diagonal wave and tilts away on scroll, and turning any of four tiles re-lays every floor on the page and names the house it came from.
medium Home builder template: a Broome custom-home builder site with prices per m², a hero photo rammed up lift by lift, live build-slot picker, wall calculator, project gallery, process, service-area map, reviews, FAQ and a working quote form.
WebGL A light landing page for an invented Gifu lantern workshop: a procedural Three.js paper lantern that the scroll winds, papers, folds flat and opens, a drag-to-open paper chooser, drawn river scenes, prints, stepped pricing and FAQ.
medium A light clay-mask landing page: a WebGL tin of wet geothermal clay rises behind the wordmark, then dries from blue-grey to white and cracks as you scroll, the batch numbers opening in its cracks; an 18-minute mask timer dries it live.
WebGL A light, pink season-pass landing page for invented Mumbai commuter earbuds: pick your Western line stretch to print battery and noise, then a 3D tiffin case unscrews tier by tier as the pass is punched per stop.
WebGL A light landing page for an invented Bohemian glassworks: a huge cranberry crystal atomiser refracts the page's own wordmark, turns on scroll and by drag to name the cutter of each facet column, then cut list, works, close-ups, runs, pricing, FAQ.
medium A quiet light landing page for a fictional Kyoto mokume-gane studio: one ring on a plinth whose woodgrain you generate by dragging — sideways twists the billet of 21 sheets, down carves it — plus a twisted billet, a printed itinerary and a price menu.
WebGL A light landing page for an invented Hamburg rainwear maker: a WebGL coat gets rained on live (beads form, merge, run off the hem), a rain dial sets the weather and recommends a cut, four close-up cuts, a receipt configurator and a ferry map.
medium Kids' and teens' savings app landing page: a plain hero with the app's jar screen built in HTML over a real photo, a scroll story where the jar's fill sets the page colour, a live savings planner, safety, reviews, plans with a monthly/yearly switch and FAQ.
WebGL A light, matatu-yellow landing page for an invented Nairobi cargo e-bike workshop: drag jerrycans, maize and mitumba onto a 3D bike, then scroll as it explodes into parts and climbs Ngong Road.
medium A light landing page for an invented onsen ryokan: each section is one of the town's seven baths and presses its vermilion stamp onto a pinned bath pass, which flips to show the route at the seventh. Live arrival-time bath planner.
WebGL A light landing page for an invented Shizuoka tea garden: a procedural Three.js slope under raymarched morning cloud that drains as you drag the hour hand from 5 to 9 a.m., then tins, harvests, menu pricing and FAQ.
medium Law firm site for a Bristol solicitors' practice: fixed fees on the page, a four-question 'What will it cost?' checker with the right lawyer, and legalese struck out in tracked changes.
medium A light, survey-plat landing page for 42 dune lots on Uruguay's coast: the 1987 plat inks itself lot by lot, you drag the sun to relight the dunes, and tapping any parcel turns it into the buy button.
medium A light sourdough-bakery landing page built as its chalk proving log: the log writes itself stroke by stroke as you scroll, a loaf's ear splits at 5:00, and a dough-thermometer dial rewrites the night.
light An estate-agent landing page where a drawn Haussmann façade is cut open floor by floor as you scroll, revealing archive prints, then becomes the listings index: each floor shows its ceiling, sun and price per m².
WebGL A light shop page for an invented Algarve flor de sal: hover the brine in the hero and Three.js cubes accrete into hollow hopper pyramids, drag to skim them with the rake, then months, stats, pots and FAQ.
medium Marketing agency template for independent shops: a SplitText hero with a real photo, six services that peel off a pinned sticker sheet with results on their backs, a live shop-window planner, case studies on till receipts and a free-audit form.
medium A light selvedge-denim landing page where scrolling dyes the site: every chapter is one indigo dip deeper, its colour rising from below as the dip number counts to 18, plus a months-worn slider that fades drawn jeans on canvas.
medium Motion design studio template for brands: a danfo bus drives in and its stripes become a scrubbable timeline, then a pinned convoy of idents, a Lagos photo band, services with cursor-follow photos, pricing and a project form.
WebGL Motion designer portfolio template for a Lisbon 3D artist: a plain hero headline and CTA, her name set edge to edge with a frame that swaps places with its letters, and colour-gel stills that flow under the pointer.
medium A light type-foundry landing page: a nine-tine rake sweeps a canvas gravel field and Kurogane rises from Thin to Black; drag the rake through a gravel bed and the letters above take on its weight.
medium A light, playful landing page for six invented baches on stilts: the drawn estuary floods under the bach as you read and ebbs by booking, where a day slider and a tide-table calendar let you pick a week by its dry mornings.
light A gourd-yellow landing page for a fictional timbila orchestra: 19 playable wooden keys drop onto their frame and fill their gourds, every section opens on a key that lands and sounds, and ten keys open the ten movements.
medium A light, one-motif landing page for a Lagos aso-oke tailor: hero strips lock edge to edge with stitched seams, a cloth picker sews the garment strip by strip with a live naira price, pricing, booking.
medium A light landing page for a fictional Lisbon azulejo workshop: one tile is missing from the façade, the scroll story paints it and drops it in, and a street picker lets you set each gap and read its price.
WebGL A light, pastel landing page for an invented Havana-made tabletop radio: turn the 3D brass knob and the page re-paints to the next Malecón facade colour through a burst of shader static.
medium Online course website template for a creative-skills academy: course catalogue with filters, a Find-your-course path finder, a syllabus explorer with lesson preview, teachers, student work, pricing toggle, FAQ and signup.
WebGL A light split-stage page for a fictional Lagos climate-architecture practice: a sticky Three.js house where scrolling runs one day of real sun, louvres turn to keep the room shaded and the bar compares indoor and street temperature.
WebGL A danfo-yellow launch page for an invented Lagos headphone: a procedural Three.js model that turns and splits into five layers dyed in through an adire resist mask, a bus-stop colourway picker that re-dyes it, a ticket price and FAQ.
medium Packaging and brand design agency template on a monthly subscription for drinks brands: SplitText hero with a real photo, services with cursor-follow photos, a can-label bench, a pint that fills with the process, beer-mat plans and an intro-call form.
medium Perfume shop template for an invented Montmartre perfumer: a photo hero in a dormer-window arch, a filterable shop with hour swatches, a working bag and quick view, then the perforated blotter card and a strip you dip into nine flacons.
WebGL A light landing page for an invented Cappadocian stone-speaker workshop: a code-drawn valley engraving behind a WebGL tuff block that erodes grain by grain into the speaker as you scroll; pick a valley to re-tint stone, light and every render.
light A quiet, light knitwear landing page where the scroll is a knitter's nine-hour day: a canvas jumper in the margin knits stitch by stitch as you read and a clock runs from 0:00 to 9:00.
medium A weaving co-op landing page where the page is the cloth: warp threads run down it and each band between sections is woven on canvas, row by row with a shuttle, as you scroll. Pick a dye and motif and a square weaves itself.
WebGL A light landing page for an invented Huila roastery: drag the roast curve and a WebGL bean darkens from green to city and cracks at 9:40; the same curve is the nav, a pinned roast band, the price chart and the footer.
medium Real estate template: renovated apartments for sale in Saitama — a mint door swings open on each flat's photo, filterable listings with prices and fees, floor plans, a monthly-cost calculator, area map, FAQ and a viewing form.
medium A light azulejo-blue landing page for a fictional Gondomar filigree workshop where one 0.2 mm wire draws every line: drag it over a giant heart and it coils into an empty cell, then a pinned scroll twists it and fills a heart.
medium A light landing page for an invented Karoo seed archive: a contact sheet of kraft packets and pencil drawings, drawers you drag out, and packets that tip their seed onto graph paper where it settles into the plant it will grow into.
medium A light landing page for an invented South Sea pearl farm: scroll drains a nine-metre Kimberley tide over drawn oyster panels, pearls are picked into a sorting tray and turned in a WebGL nacre-shader loupe.
medium A light landing page for an invented Calabrian bergamot grove: a drawn 1911 sponge press stays fixed beside the text, squeezes the rind tighter with every section and drips oil into a glass. Hold the rind to press it yourself.
WebGL A light landing page for an invented runway show in a 60 m Seoul underpass: the hero is the Three.js seating plan, tap a stool to fly down to its sightline, a pinned model's-eye walk, receipt pricing and FAQ.
WebGL A light landing page for an invented film festival on a red lightship: a Three.js twilight bay whose sail fills with the title as you scroll, a horn pulse across rippling water, and a chart where you drag a boat to see your view.
WebGL A light island-festival landing page whose line-up is the tide table: the name stays pinned while a GLSL sea drains off a raked sandbar stage, and a draggable tide dial reveals only the acts playing while the bar is dry.
medium Skincare shop template for an invented seaweed brand in Roscoff: a photo hero that says what it sells, a filterable grid with a working bag and quick view, a skin-type routine finder, then a GLSL sea that drains off the kelp beds.
WebGL A light off-plan sales page for an invented timber tower: a procedural Three.js building that assembles floor by floor on an 11-day counter, flats indexed by the forest plot stamped on their walls, a delivery-note price and FAQ.
medium A light landing page for an invented Jaipur kundan jeweller: drag any piece to turn it over, while a corner medallion turns at every chapter and pours its enamel into the next colour field.
medium A quiet landing page for an invented Estonian smoke sauna: canvas smoke seeps from a drawn log hut, thickens as you scroll the six-hour firing, rolls out at the gallery and clears before the booking form.
WebGL A light, tile-built landing page for an invented marimba-wood speaker: tap the 3D bars on top to play real notes and ripple the woven grille; every tile on the page is a tuned bar, struck by a mallet as it scrolls in.
medium A loud, flat yellow-and-red streetwear drop page: the hero is a live countdown to Friday 18:00 with squashing numerals, and a 200-number poster knocks out every piece as it sells.
medium Team calendar SaaS landing page: a plain hero with the product's week view over a real office photo, a live drag-and-drop day planner, use-case photos, integrations, three plans with a seat count and monthly/yearly switch, FAQ and a trial form.
medium A light, colour-chaptered page for an invented hilltop theatre in Valparaíso: scroll rides a funicular up a drawn hill and through the theatre's back wall, and a lever rides the page to each play's painted house.
medium Terrazzo shop template: tiles, floors and worktops from Verona with prices, a hero photo ground to a polish, a live mix painter with a seven-grit slider and price estimate, projects, fitting area, FAQ and a quote form.
medium A loud, light risograph-magazine landing page: the cover prints itself in pink then teal, every headline is two passes that slip with scroll speed, and a draggable dial misregisters the poster.
WebGL A light landing page for an invented Monterrey tower: a 3D valley where scrolling rides the lift from the street to floor 32 as the sun clears the saddle, a floor dial that re-frames the view and reprices the flats, and a full sales page.
WebGL A light landing page for an invented merino blanket mill: a Verlet-cloth blanket hangs on a rail in a sticky WebGL stage, and as you scroll the plain falls to −15 °C, the weave tightens and frost creeps in. Drag it by a corner.
medium A travelling-bookshop landing page built as one long railway ticket: a track draws down the side as you scroll, reversing at each switchback while an altimeter falls, and punching a stop slides out its shelf of books.
medium A light, place-led houseboat landing page: a canal photograph holds while the barge drags along its bottom edge, a clock, the light and the next stop follow its real timetable, and the sky warms to lamp gold.
medium A light landing page for an invented Bogotá emerald cutter: a WebGL step-cut emerald turns table-up and the camera dives into its inclusions, then a 10x loupe walks you through each stone's jardín.
medium A light lost-property museum landing page: each object stands alone on a colour tile with its yellow tag; search by station and time to pull out what was left on that train. Every 4 minutes a train passes overhead, the page trembles and all tags swing.
medium Watch shop template for an invented Swiss moonphase maker: a photo hero that says what it sells, a filterable product grid with a working bag and quick view, then a WebGL watch whose moon turns with the scroll and a night picker that sets the moon you buy.
medium Watch shop template for an invented Lapland maker of 24-hour watches: a photo hero that says what it sells, a filterable grid with a working bag and quick view, then a WebGL watch that runs through Inari’s year and cuts its daylight to your city.
WebGL A light editorial landing page for a fictional six-tent mokoro camp: scroll January to June and a GLSL flood seeps across a low-poly 3D delta to reach the camp at the June panel; then pick your month.
medium A complete studio site on a light cream palette: a kinetic headline over a pointer-reactive WebGL contour field, a velocity-skewed client marquee, hover-reveal services, stacking case-study cards, stats, pricing, FAQ and a magnetic CTA.
medium A complete fintech landing page: a 3D card that tilts toward the pointer beside a live, ticking balance, a bento of product mock-ups, a pinned cash-flow chart that draws itself as transactions stream in, a security vault, stats, pricing and FAQ.
medium A one-page portfolio for an invented designer-developer: a screen-wide name whose letters rise and thicken under the cursor, a pinned sideways gallery of six original project posters that open into case studies, services, process, FAQ and a copy-email contact.
WebGL A full light-palette launch page for an invented smart speaker: a procedural Three.js model on a drag-to-turn turntable, a pinned scroll that turns and opens it into four parts with leader-line callouts, specs, colourways, sizes, reviews, pre-order and FAQ.
medium A complete light, colourful B2B SaaS landing page: a product dashboard that assembles itself in a 3D-tilted hero, a logo marquee, bento features, a pinned four-step tour whose UI changes per step, count-up stats, a monthly/yearly pricing toggle, FAQ and CTA.
light Herbarium specimen cards, stat tiles and a member pass turn from edge-on (rotationY 90°) to face the viewer with 900px perspective and a fading glint, 0.1s apart. Axis, angle and perspective are knobs; enter, scroll, hover or click.
light Clicking “Add to bag” clones the product image and flies it along a cubic bezier arc — shrinking and tilting — into the header bag, which squash-bounces while the badge count rolls up and the button wipes to a drawn-check “Added”.
light An essay page where every link draws a 2px lime underline from the left on hover or focus (0.5s power3.out) and, once complete, leaves through the right edge. Inline links in the body copy draw across wrapped lines in reading order.
light Six illustrated plates — paper plane, swallow, comet, kite, leaf, boomerang — fly onto their marks along a cubic Bézier, banking with the tangent and drawing a fading hairline trail; trigger on enter, scroll scrub, hover or click.
light Four procedural photographs, each behind 8 surface-coloured slats that open in sequence (scaleY → 0, 0.06s stagger, expo.inOut) — or slide sideways, part from the centre or tilt like venetian blinds — while the image settles from 1.15 to 1.
medium A six-row colour index: each short title, plate and pigment note sharpens from blur(12px) + opacity 0 to crisp (1s power3.out, 0.1s stagger) on entry, scrubbed by scroll, or only on the row you hover or focus.
light Four service cards and a pill CTA get an outline generated from their own size and radius; hovering or focusing draws it around the element (0.9s power2.inOut via DrawSVG) and leaving lets the tail chase it away. Clockwise, counter or split from one corner.
light App icons, reaction stickers and chat bubbles drop 120px into place on a CustomBounce ease — two or three shrinking rebounds, squashing on every contact — then one icon hops for attention every few seconds. Enter, scroll, hover or click.
light A guided-breathing hero: a soft orb of light and three halo rings swell from scale 0.82 to 1.06 over 4s, rest 1s, then settle back (sine.inOut yoyo), each ring lagging a beat; the cue word crossfades Inhale, Hold, Exhale.
light Four buttons on a membership page: on hover or focus a slanted lime pane sweeps across in 0.55s power3.out, carrying a counter-moving copy of the label so the text inverts exactly under the fill, then leaves through the far edge.
light Six linked essay cards: on hover or keyboard focus the card's surface rises 10px (0.45s power3.out) while a separate shadow layer fades and spreads beneath it, the border brightens and the arrow slides; pressing sinks it, leaving settles it back.
light A five-place slideshow: arrows, dots, keys, drag or autoplay pick the next slide and both slides animate as a pair — slide with lagging inner art, crossfade with drift, or a clip-path wipe, with loop, rewind or clamp wrapping and a 60px drag threshold.
light Buttons, list rows, chips, icon buttons and a FAB each spawn a translucent circle of ink at the exact press point (keyboard: the centre); it scales to the farthest corner in 0.55s, holds while pressed, then fades out and removes itself.
light A collection index whose rows flood with colour: surface, hairline and ink are each color-mix()ed from a 0–1 variable GSAP tweens (0.6s power3.out, ink 0.08s behind). Hover/focus, click-to-select or scroll-to-middle triggers.
light ⌘K (or the search button) fades in a blurred backdrop and springs a command panel from scale .96 / y 12 with back.out; typing filters 12 commands with a Flip re-flow and staggered re-entry, a highlight pill glides between rows via Flip, Enter pulses and runs.
light A pill "Celebrate" button squashes on press and launches pooled canvas confetti — rectangles, discs and thin ribbons — that spin, flip and flutter down under gravity and drag, while the label rolls to a drawn check "Celebrated".
light A text-ring badge, a two-arc loader, a 16-point seal and a pair of meshing gears turn forever on linear 360° loops. Pause, reverse and hover never snap: one signed timeScale eases through zero.
light A 21:9 lake hero and two portrait images, each under stacked covers (surface, then accent) that part from the centre in sequence (1.3s expo.inOut, 0.14s apart); at 35 % of the opening the image settles from 1.25 and the headline lines rise.
light Six router transitions in one demo — blinds, doors, iris, shutter, pixels and a diagonal stagger wipe. Each closes over the page with an expo ease, shows the destination label, swaps the page underneath and reveals it as the new content rises in.
light A magazine page whose covers, cover story and stats slide into their frames from a chosen edge (100% of their own size, 1.1s expo.out, 0.1s stagger) — inside an overflow mask or free — on load, scroll, hover/focus or click.
light A long-form case study whose paragraphs, figure, quote and stats drift 48px up while fading in (0.9s power3.out, 0.08s stagger) as they reach the reading line — and keep drifting up and out once read — on scroll, load, hover/focus or click.
light A gallery programme where artworks, captions and a curator's note fade from opacity 0 to 1 (1.2s power2.out, 0.12s stagger) without moving — on load, on scroll, on hover/focus or on click — and fade back out when you leave.
light A skincare hero where an amber serum, a stone jar, a lime tube, a droplet and two pebbles drift 18px on 6s sine yoyo loops, each offset by 30% of a cycle and tilting on its own period while their floor shadows shrink as they rise.
medium A full-bleed topographic map drawn in one fragment shader: a slowly drifting fractal terrain traced as pixel-perfect contour lines with thicker index contours, an optional elevation tint, and a soft hill that rises under the pointer in the accent colour.
light A pricing page and a shelf of UI components whose cards, badges and buttons scale from 0.6× at their bottom edge to full size (0.8s expo.out, 0.07s stagger) — or shrink from above 1× — on scroll, load, hover/focus or click.
light A transparent header floats over a full-bleed fjord hero; once 120px of content has slid under it, a blurred solid bar fades in, a hairline draws across, the CTA turns accent and the bar compacts — switched at a threshold, scrubbed, or at the hero edge.
light A tri-fold itinerary, four travel notes and a ticket with its stub swing forward from 90° behind the page on a left hinge, leaf after leaf (0.14s), each crease shadow lifting as it flattens. Hinge edge, angle and perspective are knobs.
WebGL An original sunset poster drawn with canvas is sampled into 36,000 coloured points laid out as a flat image; press and hold and they spring onto a spinning globe — the picture wrapped as its map — through a burst of turbulence, then unfold when you let go.
light A four-product shop grid where each frame stacks a studio shot and an alternate view (detail, colourway or in situ); hover, focus or tap dissolves the alternate in (0.6s power2.inOut) as it settles from 1.06× while the primary fades out underneath.
light A ceramics shop grid: hovering or focusing a tile scales its photograph to 1.15× inside a clipped 4:5 frame over 1s expo.out. The scale origin follows the cursor, a scrim and 'View piece' label fade in, and the badge, name and price never move.
light Three observatory plates wait behind an 18px pinhole; a circle clip grows to exactly the radius that covers each plate (1.2s expo.inOut) from its focal point, centre, a corner or the pointer — on enter, hover or click.
medium Four painted landscapes drift from a wide crop to a tight crop on their subject (or back) inside a rounded frame, crossfading while the old image keeps moving. A live crop map shows start, end and focal point — click it to refocus.
light Three original Lottie animations authored as JSON: an upload story with intro, seamless loop and success segments in a full player (segments, speed, loop, scrub slider), a bell that rings on hover, a like burst on click and a scroll-scrubbed copy.
light A radio-station header whose burger morphs into a close icon and opens a menu, above four large specimens of the same three bars: cross, two-step collapse, arrow and spin. Outer strokes travel ±6px to the centre and rotate ±45° while the middle one vanishes.
light A museum booking page: the backdrop fades to 0.7 while the dialog rises 16px and scales 0.92 → 1 (expo.out, starting 0.2s before the dim finishes); its rows stagger in. Closing plays a quicker scale-fade out before the layer hides and focus returns.
medium A plate breaks into irregular noise patches with a glowing rim and the next picture shows through — fractal noise compared with an animated threshold; it assembles on entering view, advances on click, scrubs with scroll or follows a manual threshold.
medium The pointer drags a wake of noisy distortion through a full-bleed dusk-dune picture: a decaying float trail buffer masks an fbm displacement with static rows, grain and RGB split, widening with pointer speed, then heals.
light Four KPI tiles where every digit is its own vertical reel: values that rise roll upward and fall roll downward (wrapping through 9/0 like an odometer), the trend arrow flips, the delta pill swaps tone and a sparkline slides one step. Auto-updates every 2.8s.
light Twelve integration nodes circle an accent hub on three rings at 1, 2/3 and 2/5 speed. Hover or focus one and the whole system eases to a stop, a dashed line links it to the core and its details slide in.
light Six project tiles: hovering or focusing slides a dark veil in from the edge the pointer entered (0.55s expo.out, opacity → 0.72), pushes the artwork to 1.06× and lifts kicker, title and actions in with a 0.06s stagger; on touch the actions stay visible.
medium A wordmark is blown in from one side as fine wind-borne grains that streak, swirl, settle onto the letters and hand over to crisp type behind a soft front; Remove erodes it from the same edge and carries the grains away downwind.
medium A flock of dash-shaped particles pours in from the screen edge, wheels around a promo heading on a noise flow field and settles letter by letter into crisp type; hover, tap or Enter releases the swarm again and it always flies home.
medium A serif heading is sampled into thousands of points that ride a travelling wave — each circles on its own Gerstner orbit, warped by noise, shaded bright on the crests with accent glints — and the pointer drops ripples that roll outward through the type.
light Badges, an order tick, notification pips and a week of streak dots grow from scale 0.3 past their size and settle on back.out(1.7) or a decaying elastic spring — on load, on scroll, on hover or on click, from one engine.
light A product card and a control panel where every button, switch, segment and record key compresses to 0.94 and sinks 2px on pointer or key down, then springs back with back.out(3) on release or when the press is cancelled by sliding off.
light A festival lineup announcement where every name, update card and the date arrive oversized (1.5×), transparent and soft (6px blur), then settle to their real size (0.9s expo.out, 0.09s stagger) — and puff back out — on scroll, load, hover/focus or click.
light A courier-tracking map where three rings leave the live pin every 0.7s, growing to a 72px radius while fading from 70% to nothing; pressing the shop, home or a hotspot fires one quick burst of rings and a label.
light A floating action button bursts six actions along a 160° arc: each flies from the hub to its polar position (back.out, 0.04s stagger) as the plus turns 45° and a hairline track draws from the middle out. Labels slide out on hover/focus.
medium A wobbling orb trails the pointer over a grey plaster still life; inside it the picture is re-sampled per channel like a prism and gradient-mapped between two drifting colours, stretching with speed and widening when pressed.
medium A tiled pool picture sits under moving water: a wave height field in the fragment shader bends every lookup by its slope and gathers light where its curvature focuses, with swell, drop and interference patterns, stretch and speed.
light A headline ends in a phrase that rolls to the next alternative: all options stacked in a clipped one-line window sized for the longest, the stack moving by one line height. Loops every 1.6s, or rolls on hover or click; a status line follows.
light A dial, a type seal, petals and skewing blades turn through 180° as each crosses the viewport (top 100% → bottom 0%, scrubbed), while three text cards lean by 4% of that — on rotate, rotateX, rotateY, skewX or skewY.
light A three-plate photo essay where each image's scale is tied to scroll progress inside a fixed, clipped frame — approaching 1 → 1.35 or receding 1.35 → 1 around its subject — while the frame's inset opens and a mono readout tracks the live scale.
medium A glass lens trails the cursor over an editorial poster drawn on a canvas: inside it the type is magnified with barrel distortion, the rim splits into RGB fringes and catches a crescent highlight, the lens grows while pressed and touch users drag it.
light Three pricing cards rise 8px on hover or focus while a pre-rendered cast-shadow layer and a blurred halo fade in (0.5s power3.out); buttons interpolate their box-shadow directly, and the featured card's halo breathes on a pausable loop.
light An invite form refuses an invalid submit: each field that needs attention jitters 10px left and right four times with a shrinking range (0.5s total), lands exactly at 0, turns red and shows a message saying what to fix.
light A bottom sheet springs to half height while the page behind scales to .94 and rounds its corners; drag the handle with mouse or finger: rubber-band above the top, velocity-projected snap to full / half, or fling down to dismiss. Esc closes; focus is trapped.
light A feed of three note cards loads as grey skeleton bones — avatar, two lines, an image block and three text lines — with one diagonal light band sweeping each card; once loaded the bones fade and the real content rises in card by card.
medium A poster is sliced into strips (or rings) that each slide by their own phase, so the image repeats in stepped copies like a slit-scan photo; a looping wave drives it, the pointer drags the nearest strips and scroll scrubs and shears the scan.
light Section links glide the page to their target instead of jumping: the stop clears the fixed header, longer trips take longer, focus moves to the heading, the nav ink follows, and any wheel, touch or key press hands control straight back.
medium Lenis smooths the page (lerp 0.08) while chosen layers (three photos, hero lines, quote words, stats) chase that position with catch-up times of 0–0.6s. They trail behind as you scroll and settle into dashed outlines when you stop.
light A letterpress seal, eight SVG ornaments and three packaging stamps wind in from one full turn and 60% scale to their resting angle on expo.out as they appear — turns and final tilt are separate knobs. Enter, scroll, hover or click.
light Twelve cards share one entrance (y 28 → 0, 0.8s power3.out) but start at computed times: a list, reverse, centre-out, edges-in, random, diagonal or radial wave, with a fixed interval or a total spread — on enter, click or scroll.
light Pip, an original SVG character, runs on a Rive-style state machine: Idle, Curious, Happy and Asleep, driven by isAwake, mood, a cheer trigger and pointer look inputs. Every change blends over 0.45s; a live graph and log show each transition.
light A still life, a release-loop diagram and a signature draw themselves stroke by stroke with DrawSVG (0% → 100%, 1.8s, 0.06s stagger), then fills and labels scale in. Draw on load, scrub with scroll, draw on hover and erase on leave, or toggle on click.
light Six icon pairs — play → pause, menu → close, sun → moon, heart → star, stop → record, next → done — and a large pebble that becomes a flower, star, drop, squircle or wave, all interpolated with MorphSVG on hover, click, scroll or a loop.
light A two-line serif headline bursts apart from the cursor: characters fly outward along radial vectors with random spin and blur, the nearest ones furthest. Leaving springs them back with an elastic, out of order; on touch a tap plays the whole burst.
light A lookbook poster whose seal, price burst, flower mark, tag and half-moon twist into alignment (rotate −120° → 0, scale 0.3 → 1, expo.out) around a chosen pivot, followed by three icon tiles; trigger on enter, scroll, hover or click.
light Three type-specimen cards (Fraunces, Inter Tight, JetBrains Mono) turn 180° on Y with 1200px perspective in 0.8s power3.inOut on hover, focus or click, dipping to 0.95 with a sheen mid-turn to reveal a back with character set, weights, licence and Copy CSS.
light A serif headline types its last phrase one character at a time with uneven, human timing and a breath after punctuation, rests with a soft-blinking caret, backspaces with acceleration and types the next phrase; the thin caret smears as it jumps.
medium A procedural landscape — low sun, two hill ranges, still water — painted in one fragment shader as layered watercolour washes that bloom in wet, then dry into darker edges with granulating pigment and paper tooth; the pointer re-wets the paper.
light A two-line serif headline floats on a travelling sine wave: every character bobs, tilts along the slope and swells slightly on the crests. Near the pointer the amplitude rises sharply, then settles back to a lazy idle wave with inertia.
light Five project tiles and a statement card are uncovered by a travelling edge: clip-path inset() opens from one side, the centre line or all four sides (1.1s expo.inOut) while the work stays still — on enter, scroll, hover or click.
light An SVG shop sign hangs from a bracket hook and sways idly; hover, focus or tap kicks it into a 12° swing that loses 38% per half-swing (0.9s, sine.inOut) until it settles, while bell, tag and heart icons rock around their own hinges.
light Three studio statements arrive one word at a time — each word rises 28px out of transparency on its own beat, commas and full stops add a breath, and the italic emphasis words land a moment later from further away.
Featured medium A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.
Featured WebGL A pinned, scrubbed scroll flies a Three.js camera along a Catmull-Rom spline through floating prints, accent rings and drifting particles, aiming a little ahead of itself; fog keeps the far work soft and DOM captions land at four waypoints.
Featured light A pitch-dark page where a feathered radial spotlight follows the pointer with lag and uncovers a procedural star-chart composition beneath; clicking pulses the circle wider, and keyboard users get a static centred spotlight.
Featured light GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
Featured light A 3×2 grid pins; as you scroll the centre tile grows (a measured clip-path inset) until it fills the viewport while the other five tiles slide out of frame, then a headline rises over the full-bleed image. Scroll up and it folds back into the grid.
Featured medium A complete luxury launch page in one motion language: a counted preloader, a masked hero over a settling image, a pinned canvas bottle that turns to reveal three callouts, a word-by-word story, a pinned sideways gallery and a footer wordmark that fills.
Featured light Twelve procedural prints are packed into a JS masonry wall and surface in scroll-batched groups (y 40 → 0, opacity, 0.06s stagger); a Still life / Portrait / Architecture filter bar re-flows the wall with GSAP Flip.
Featured medium A pinned 3D CSS scene: four planes sit at real translateZ depths inside a 1200px perspective, and scrolling tilts and dollies the camera container through them (rotateX +10° → −10°, z −240 → +360px) — near planes sweep past, the far word barely moves.
Featured light A pinned two-column feature section: four tabs on the left activate in sequence as you scroll — each with its own filling progress line — while the matching procedural visual on the right crossfades and slides in; clicking a tab scrolls to its segment.
Featured medium A full-bleed WebGL plane dissolves into a mosaic (cells grow 1 → 48 px), swaps to the next of three procedural pictures at the coarsest moment and sharpens back — on click, or automatically every 4 seconds.
Featured medium Twelve portrait images stand on a 3D ring (rotateY i×30° translateZ R) inside a perspective stage; a pinned section turns the ring with the scroll while the frame facing you is named in a caption and tracked by a progress bar.
Featured light Twelve image tiles start thrown across a pinned viewport at random positions and angles, then glide, rotate and scale into a neat 4×3 grid as you scroll — both layouts are measured and Flip.fit computes the exact transform for each tile.
Featured medium A pinned full-viewport video whose currentTime is scrubbed by scroll — the clip is encoded with every frame a keyframe so seeks land instantly — with a timecode HUD, a keyframe rail and captions that hand over at 32% and 66% of the pin.
Featured light A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.
Featured light A pinned keynote paragraph of large serif words that light from 20% to 100% opacity one by one as you scroll through +=250% of pinned travel (SplitText words, scrub 0.6), the current word glowing lime before it settles; hairline progress + word counter.
light Headline characters swing in from a 90° rotateX (or rotateY) with real perspective and a z-translate as each heading enters the viewport; lines are masked so the letters appear to rise out of the page.
medium Headline, pull quote, image + copy pairs and a stat row rack into focus as they enter: filter blur(16px) + opacity 0 + scale 1.04 → sharp over 1.2s power3.out, with the filter cleared afterwards so the GPU cost lasts only as long as the motion.
light Seven cards start as a neat deck; through a pinned section the deck fans open (rotation −30…30°, x spread, a slight arc) like a hand of cards, holds, then the cards straighten and settle into a clean row of steps with a caption.
WebGL Clicking anywhere on a full-screen WebGL quad drops a ripple into a procedural dusk gradient: up to five rings expand from a vec4 uniform array, bending the picture along the wavefront with red/blue aberration, fading as they grow; idle, it ripples by itself.
light A pinned dark stage opens like an iris: a full-bleed procedural landscape is revealed through a scroll-scrubbed circle clip-path that grows from 0% to 150% while the art settles from a slight zoom, and the headline rises at 60%.
light Large editorial images are wiped on by animating clip-path: inset() from one edge (left/right/top/bottom) to zero, a 1px accent hairline riding the wipe front; toggle between a 1.2s play-once reveal and a scrubbed, reversible wipe.
light A row of four oversized serif statistics counts up from zero the moment the row enters the viewport — snapped to whole units, 1.8s power3.out, 0.15s apart — with prefix/suffix, tabular numerals and a hairline underline that draws beneath each figure.
light Animated by CSS scroll-driven animations alone: view()-timeline reveals with a custom-property stagger, a scroll()-driven progress bar, and a 300vh sticky chapter whose lines and 0–100% counter run on a named view-timeline with animation-range.
light A five-layer procedural landscape parallaxes with zero JavaScript: each layer rides its own view() timeline with a different translateY range, a sticky caption fades across the scene's cover range, and @supports keeps unsupported browsers on a static scene.
WebGL Ten procedural prints sit on WebGL planes bent onto a cylinder in the vertex shader; a pinned, scrubbed scroll turns the ring past the camera while the far frames fade into the dark and a DOM caption follows the nearest print.
light A DPR-aware canvas grid of hairline dots that the pointer pushes outward and lights up within a soft radius; each dot springs back with a damped overshoot while a slow idle wave keeps the field breathing, and the loop pauses off-screen.
light Ten portrait cards you can drag or throw: GSAP Draggable + InertiaPlugin coast the track and snap it to the nearest card centre, cards scale and fade with their distance from the middle, and a progress bar, counter, arrows and keyboard keep it navigable.
light A pinned 35mm strip of fourteen procedural frames — sprocket holes, edge print, one dawn-to-dusk scene — is pulled through a projector gate by the page scroll while a sticky frame counter and a “now showing” caption update as each frame lands.
WebGL A sticky full-bleed WebGL hero reads the page's scroll velocity every frame and tears the picture into hash-seeded horizontal slices with an RGB split that scale with speed, settling exponentially when you stop; the headline's red and cyan ghosts follow.
light A pinned gallery of eight tiles morphs from a four-column grid into an index list as you scroll: Flip records the grid, the layout class flips to list, and Flip.from() is scrubbed inside a paused timeline while titles and hairline rules stagger in.
medium A still life is printed through a fragment shader as a rotated halftone screen (dot size follows luminance), a 4×4 Bayer dither or line screen; hovering swells the screen under the pointer like a loupe and tilts its angle, both easing in with a per-frame lerp.
light Rough, marker-style SVG underlines, circles, arrows and strike-throughs are generated over key phrases and ink themselves in (DrawSVG 0 → 100%, 0.8s power2.inOut, two passes of different weight) as each line scrolls into view.
light A viewport-filling serif wordmark shrinks and travels into the header's logo slot as you scroll a pinned hero — Flip.fit measures the exact transform — while the header background and nav links fade in behind it.
light A fixed header slides out of view when you scroll down faster than a velocity threshold and slides back the moment you scroll up; past a set offset it shrinks into a compact strip with a frosted backdrop.
light Six tall image strips share a row; hovering (or tapping) one widens it to 3× while the others compress and dim, its title and story sliding in — animated with transforms and a centred clip-path window only, so nothing re-lays out.
light One enormous word (30vw tall) sweeps across the viewport from right to left as its section scrolls past, scrubbed to the scroll and layered between three images so it slides behind some and in front of others.
light An asymmetric editorial grid of images where each mask opens left-to-right (clip-path inset 0 100% 0 0 → 0) while the picture inside settles from scale 1.3 to 1 over 1.4s expo.out; neighbours in a row are staggered so the page reveals like a contact sheet.
light Six procedural prints sit in a fanned stack; every 0.35s the back card cuts to the front with Flip (fresh rotation jitter each time) while a counter runs 0→100, then the top print expands via Flip.fit into the page's hero image and the headline rises.
light A pinned column of eight archive entries that never runs out: a seamless looping timeline is wrapped with gsap.utils.wrap and driven by a smoothed scroll proxy, so the list cycles endlessly in both directions while entries scale and fade towards the edges.
light Clicking a thumbnail reparents its image into a centred stage and GSAP Flip morphs it there in 0.9s expo.inOut (scale + border-radius) while the backdrop fades and the caption rises; arrows crossfade through the series, Escape morphs it home.
light Click → the pill collapses to a circle holding a spinning arc, waits, then the arc morphs into a tick while the fill floods green and the pill re-expands around "Done"; a second button plays the declined variant with a red cross and a shake, then both reset.
light A back-to-top disc pops in after 30% of the page, draws the page's scroll progress as a scrubbed SVG ring, leans towards the cursor with a magnetic pull and scrolls home in 1.2s with ScrollToPlugin.
light An editorial grid of five fixed-size, overflow-hidden frames; inside each, a 130%-tall image is scrubbed from yPercent −15 to 15 as its frame crosses the viewport, so every picture drifts against its own window.
light Hover or focus "Products" and a full-width panel unfolds from under the bar with a clip-path curtain; three columns of links rise in with a tight stagger and a featured card slides in from the right. Keyboard-complete, and an accordion on phones.
light The classic constellation: a canvas of slowly wandering points that draw a line to every neighbour within reach, fading with distance and tinted by the accent, with the pointer acting as an extra node; reduced motion gets one static frame.
light A five-chapter story page that alternates reading directions: vertical prose chapters flow normally, while two picture chapters pin and travel sideways; a persistent hairline rail with chapter dots tracks the whole journey.
light A glowing comet marker and its label card ride an SVG route via MotionPathPlugin (align + autoRotate) as you scroll a tall section, while DrawSVG inks the route 8% ahead of the marker; three stations light up as it passes.
light A four-plane nocturne hero — stars, rings and an orb, the headline, a hazy foreground — where each plane is scrubbed at its own yPercent speed by scroll and, on desktop, leans ±20px per depth toward the cursor through a lerped pointer loop.
light Four lines of hollow, outlined display type fill with solid colour from left to right as each line crosses the viewport — a filled duplicate sits over the outline and a scrubbed clip-path inset reveals it, so the lines pour full one after another.
light Viewport-sized display words sit behind and in front of three image plates and travel at their own speeds as you scroll; the front words are outlined and set to mix-blend-mode difference, so they invert wherever they cross a picture.
WebGL Twenty thousand points drift in a sphere, converge into the word MOTION as a pinned section is scrolled, hold on the wordmark, then disperse again — each particle on its own randomly staggered path inside one vertex shader driven by a scrubbed uProgress.
light A hairline SVG ring draws from 0 to 100% around a tabular serif counter; at 100 the ring swells to 14× and fades, the number slides out of its mask, and a simple page appears as its headline lines rise one after another. Replay included.
medium A glowing tile grid tilted 60° into the screen rushes toward the camera as you scroll through a pinned section; lit tiles drift past, a gradient fog swallows the far rows at the horizon and a mono HUD counts the distance travelled.
WebGL A pinned Three.js bottle (procedural bevelled lathe, brushed cap, studio lighting) turns 360° as you scroll; four feature labels fade in at the rotation angle where their part faces you, with leader lines projected from 3D anchors.
light Six milestones on a vertical line: the year stays pinned on the left while a progress line draws down with the scroll, each dot pops and fills as you pass it, and the cards slide in from alternating sides.
light Three pill buttons flood with colour from the exact pointer position on hover: a clip-path circle grows from the entry point and the label inverts as the edge passes it; clicks add a translucent burst and a press squash.
light A fixed top bar scales from 0 to 100% as the article scrolls, mirrored by a circular ring with a live percentage and an estimated minutes-left label computed from the word count.
light A pinned headline reads 'We design ___'; every scroll step flips the blank word to the next of five with a masked rotateX turn, a hairline step indicator fills along, and the scroll snaps to each word's resting point.
WebGL A full-bleed WebGL plane, matched every frame to a DOM frame, melts between four procedural images as a pinned section is scrolled — a fractal-noise mask drives a liquid front with pixel displacement and a chromatic split, while captions hand over per segment.
light A fixed full-page gradient built from four CSS variables (three colours + angle) is scrubbed through four keyframes as the page scrolls: the colours cycle through the stops, the stop positions breathe and the angle turns, with a small dial reporting the angle.
light Five tall image panels sit in a pinned row; scrolling opens them one after another — the active panel widens to take half the row while the others compress to slivers — using only transforms and clip-path, with the caption rising inside the open panel.
light Five chapters each carry a ground colour and ink colour in data attributes; when a chapter crosses a sensor line the body background and text tween to match, while a floating swatch readout names the colour.
light A fixed column of six dots tracks six full-height chapters: the active dot grows, turns accent and reveals its chapter name; hovering shows any label; clicking scrolls smoothly to that section with ScrollToPlugin.
light A large SVG blob sits behind four full-height chapters and morphs between four shapes (MorphSVGPlugin) on one scrubbed timeline that spans all of them, its fill sliding from one colour to another as the chapters pass.
light An off-canvas drawer slides in from the left or right over a fading scrim while its links stagger in; the page behind is made inert, focus is trapped, Escape closes, and a swipe (GSAP Draggable) drags it shut with the scrim following your finger.
light Four columns of stacked cards scroll at four different rates — each column's data-speed scales a y tween across the section's scroll distance — so faster columns feel nearer and the wall gains depth, with the column speeds printed as a live legend.
light Luxury CTAs whose label is two stacked SplitText copies in a mask: on hover the top characters roll up and out while the second copy rises in, 0.02s apart, as the arrow slides out and its twin slides in and a hairline draws across.
light A fixed near-black overlay with a radial mask hole is a torch beam: its position and radius are scrubbed along a keyframe path as the page scrolls, lighting each exhibit in turn; the cursor leans the beam on desktop and the hole opens fully at the end.
light Three editorial groups — a heading plus three cards each — fade-rise into place (y 40 → 0, opacity 0 → 1, 1s power3.out, 0.08s stagger) as they enter the viewport; ScrollTrigger.batch groups whatever enters together into one staggered tween.
light Three canvas layers of stars at different depths drift slowly across a sticky sky, slide under the pointer with depth-weighted parallax, rise as you scroll, and every few seconds a shooting star streaks through the near layer.
light A product tab bar whose single indicator slides and resizes to the active label with GSAP Flip — optionally stretching across both tabs first — while the content panels crossfade. Fully keyboard operable with a roving tabindex and arrow keys.
light Two sentences set on crossing SVG curves slide along their paths as you scroll — the serif line travels one way, the outlined accent line the other — by scrubbing each textPath's startOffset over the section's trip through the viewport.
light A dark editorial page flips to a warm paper-white theme while the Daylight chapter is on screen: five CSS design tokens tween on the body, the artwork inverts and a fixed difference-blend logo stays legible through the flip.
light Five brand words slide up through a mask one after another — each arriving and leaving with a slight blur over a thin progress line — then the last word stays, scales via Flip into the page headline's exact position and the rest of the page rises beneath it.
Featured light A burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.
Featured medium Moving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.
Featured WebGL Twenty-four procedurally painted posters spiral down a fog-filled tunnel; wheel, drag or swipe sets the camera's speed, idle autoplay keeps it drifting, and plane depths wrap modulo the loop so the archive never ends.
Featured WebGL A Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.
Featured light A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.
Featured WebGL Thirty thousand additive points morph between a sphere, a torus knot, a cube and a heart; every particle starts on its own random schedule and takes a swirling detour, so each change of shape reads as a swarm rather than a slide.
Featured light A full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.
Featured WebGL A noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.
Featured light A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
Featured medium A pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.
Featured light A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.
Featured medium A pinned hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.
light Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.
light Five hairline-ruled FAQ items open with a true height-from-zero-to-auto tween; the plus rotates into a cross, the copy slides up a beat later, the index turns lime and the previously open item closes at the same time.
light Three button variants share a 1px conic-gradient ring that orbits forever via a GSAP-tweened --angle; hovering triples the orbit speed, sweeps a highlight across the face and rolls the label up to a second copy. Active presses scale to 0.97.
light A 16:10 comparison frame with a warm graded 'after' and a flat, desaturated 'before' derived from it on canvas; a lime Draggable handle clips the top layer, with keyboard, click-to-jump and an intro sweep to 60% and back.
light A bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.
light A white disc in mix-blend-mode: difference trails the pointer with a 0.12 lerp, inverting headlines, a lime block and an image as it passes, swelling from 24px to 120px over links with a tiny label and pulsing a ring on click.
light A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
light Clicking a nav link closes six vertical slats over the page from the top, draws a monogram and wordmark with a 00→100 counter, swaps the content underneath, then opens the slats from the bottom as the new page rises in.
light An editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.
light Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.
WebGL A GLB perfume flask idles on a slow turntable under a key/fill/rim studio rig with a soft contact shadow; drag to orbit with damping, pick a finish to tween the PBR colour, and labels track points on the model.
light A self-running motion poster: seven stacked rows of the same word, from hairline to black, shear and slide in alternating directions on a yoyo loop while a secondary word flips over in 3D every 1.6 seconds.
light An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
light Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
light A glowing SVG form morphs circle → square → blob → star → mark while a hairline outline traces each new shape and a percentage climbs; at 100% the form scales 40× to fill the viewport and fades into the page.
medium A full-screen fragment shader blends four drifting colour fields through domain-warped simplex noise, adds animated film grain and a soft vignette, and lets the pointer gently pull the warp; a CSS gradient stands in when WebGL or motion is unavailable.
light A three-page demo where every navigation runs one timeline: a surface panel and a lime panel wipe up from the bottom (0.8s power4.inOut, stagger 0.08), the page swaps beneath, then they exit upward as the new content rises in.
light A tall hero built from five depth layers — sky, far ridge, mid ridge, foreground and headline — each scrubbed at its own yPercent speed from a data-speed attribute, plus a lerped pointer parallax on desktop that tilts the scene toward the cursor.
WebGL Four image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.
light A long grid of gradient tiles and oversized words shears up to ±8° and shrinks slightly in proportion to scroll velocity, then eases back to zero in 0.8s; a mono readout shows the live velocity and skew.
light A long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.
light Clicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.
light Five full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.
light A two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.
light A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
light Four triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.
light A single display word split into characters whose font weight (300 → 900) and SOFT axis follow the pointer with a Gaussian falloff; leaving sends a left-to-right ripple back to rest, and touch devices get an automatic looping wave.
WebGL Four figures in a normal scrolling page are mirrored by WebGL planes on one fixed canvas, matched to their DOM rectangles every frame; the planes bow and ripple with scroll velocity in the vertex shader and zoom slightly on hover.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…