Changelog

Pinned scroll section where a finished product landing page bursts into a 3D cloud of its own live components (nav, headline words, product photo, feature cards, price and button), then scrolling pulls each part home in captioned chapters until the real, working page is back together.

A WebGL launch hero with a solid 3D glass object floating over your own headline and photograph, refracting them with real per-channel dispersion. Grab it and throw it: it flies on its momentum, bounces off the edges and springs home, and the faster it moves the further the type splits into a spectrum. Prism, lens, torus or your own logo extruded from an SVG.

Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo.

Pinned scroll scene that plays a record: the disc slides out of its sleeve onto a turntable, spins up under a groove sheen, and the tonearm tracks inward while the track list lights in step with the needle.

A pinned scroll scene where a technical drawing of a product draws itself with a pen tip, adds counting dimensions and numbered callouts, then becomes the product photograph through a hatching mask.

A pinned, printed product carton built from CSS 3D panels that unfolds into its flat dieline as you scroll: the tuck lid opens, a real-time three.js glass jar lifts out turning in 3D, and every flap, side and the glue tab hinges flat with card-stock overshoot.

A seven-page website for a hardware or aerospace company: sentence-case grotesk display type on true black, spec sheets of huge numerals, products colour-coded with their own buy bars, and a viewfinder hero whose brackets hunt the hardware and lock onto parts. Worked example: a satellite bus maker in Prestwick, Scotland.

A six-page website for a manufacturing or chemicals company, set on warm bone paper with oxblood and charcoal flats, one acid-yellow accent, and every photograph graded in CSS from oxblood shadows to bone highlights. The home page crosses a huge purity figure over a tall photo column; visitors drag a reactor dial along a yield curve into its optimum band, open full-width process panels, pick sites on a real road map and plan an order by product, grade and tonnes. Worked example: a specialty chemicals maker on Teesside.

Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen.

Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph.

Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed.

Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed.

Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message.

Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture.

Pinned scroll quote that lights word by word, then the camera flies into a letter of its last word, which is filled with a photo, until the photo fills the screen.

Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her.

Pinned scroll section where tall arched windows in a flat wall look out on one continuous picture, then widen and dissolve the piers between them until the view is full bleed.

Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed.

Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top.

Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message.

Pinned scroll section where a full-width picture opens from a hairline slit to full bleed like a film letterbox, with two lines of huge headline riding the slit's edges off the stage.

Pinned scroll headline with a picture set as a word in the sentence. Scrolling grows the small pill to full bleed, and the words around it are pushed out along the line as real type.

Seventeen-page documentation website template for product docs, help centres, knowledge bases, design systems and company handbooks. A flat saturated colour band, large heavy type and live examples that really validate, shown as the docs for Marlow, a small forms library. Four palettes on one set of tokens, plus light and dark.

A one-page website template for a writer or editor, opening on a photograph you can crop: drag its corners and the headline re-sets around the new shape while the caption reports the crop as figures. White paper, one ink and one flood of colour. Suits authors, journalists, photographers, small studios and independent magazines.

An eight-page developer tool website template with signature page transitions and a real light and dark theme: home, product, pricing, changelog, customers, a customer story, docs and sign-up. The worked example is a background job service with a live queue you can run and break. Re-points to a developer tool, an API product, an analytics or fintech SaaS, logistics software, or any multi-page software site.

Nine-page technology news and reviews website template on true black with slanted colour bands: giant condensed headlines over duotone photographs, a filterable story wall, a sortable score wall, a two-phone comparison you drag, and a long read with redaction bars that lift.

Seven-page YouTube channel website template for creators, podcasts and documentary studios: a full-bleed staged hero with a giant wordmark, hand-drawn marks on photographs, a storyboard player with chapters and a live transcript, a pile of episode prints to throw around, plus membership and sponsor pages.

A pinned horizontal scroll section where the cards hang from a real line, built on GSAP ScrollTrigger, Draggable and InertiaPlugin: the cord sags, stretches and waves with the row, and every card swings from its peg.

A navigation bar whose active indicator is one body of glossy liquid. It stretches, necks and splits between items, sheds a satellite droplet, reaches towards the item you hover, and drips into a liquid rule at the foot of the nav when it arrives hard.

A pinned hero opens on one huge word cut out of the page with a film playing through its letters. Scroll flies the camera through the hole in one letter until the film is full bleed, then the real heading rises over it. Built on GSAP ScrollTrigger.

A signature or hand-lettered word that writes itself stroke by stroke, in the right order and with pen pressure, built on GSAP DrawSVGPlugin and MotionPathPlugin.

The circular spinning text badge from studio sites, built on GSAP ScrollTrigger and InertiaPlugin: it picks up spin from scroll speed, coasts back to idle and turns its arrow to face the pointer.

Nav links and button labels that roll over letter by letter like little lit cubes, built on GSAP SplitText, reacting to how fast the pointer arrives and rippling into neighbouring links.

A nine-page AI agent dashboard where you point at a live client website and say what you want changed. White panels float over blurred client photographs, every change reads as a calm thread with green and red line counts, and a history scrubber rewinds a real rendered page. Worked example: a two-person web studio running five agents across four client sites.

A working phone app for recipes and meal planning: tonight's dinner with a swipe deck to swap it, a photo recipe library with search and filters, recipes that scale and shop themselves, a cook mode with several running timers, a draggable weekly plan and an aisle-sorted shopping list. Full screen on a phone, live in a phone frame on a desktop.

A working mobile app for strength training: today's session as a photo poster, a live set logger with a rest timer, lift charts, a training crew, coach chat, settings and a four-step welcome. Full screen on phones; on desktop it runs in a phone frame on a bold orange stage.

Six working form flows drawn like printed forms, in one cobalt ink on paper: a sign-up you fill in as a sentence with an email code, a six-step application with check your answers, a booking calendar, a checkout, a routed contact form and account settings. Worked example: an open wood and metal workshop in Sheffield.

A seven-page uptime monitoring and status dashboard set in one monospace face on boxed black-ruled grids, under a yellow band that always says what is broken. Ninety days of every service read as one grid of squares, plus incidents with a live timeline, monitors, an on-call rota, a public status page and settings.

An eight-page web analytics dashboard on one flat white sheet ruled by hairlines, with no cards, no shadows and square corners. Daily traffic draws as a barcode of thin green bars with pink misses under a dotted target, a metric strip switches the chart, and every breakdown row filters the whole dashboard. Worked example: an online travel magazine with a shop and memberships.

An eight-page project management dashboard in a dark, keyboard-first app shell: a project home with a giant title and a draggable hill chart that replays past weeks, an issue list that turns into a drag-and-drop board, issue detail with J and K, a Gantt timeline, an inbox to triage, settings with a live theme preview and Cmd K. Worked example: a brand studio running a ferry booking relaunch.

An eight-page SaaS admin dashboard on a quiet grey field, where saturated hatched colour lives only in the data: a stepped payments funnel with a lit stage, filterable payments with a timeline drawer, customers with lifetime value, an invoice composer, reports with a draggable scrubber and settings. Worked example: a payments platform for a three-shop bakery.

A six-page design agency site where every project owns a full-screen colour and one giant cropped mark, and scrolling floods the page from one project's world into the next. Visitors look through each mark at the photographed work, filter projects by discipline and take a client's mark apart. Worked example: an identity and motion studio in Glasgow.

Six-page rooftop bar and cocktail bar website template on white daylight: a ruled-table header with live sunrise and sunset, a hero you scrub from noon to 23:00 through six matched photographs of the roof, a drinks list arranged by the hour, a weather plan, a dated programme and a real map.

Six-page wine bar website template on a candlelit claret ground: a two-room hero that leans towards the room you point at, cream rails down both edges that slide in a menu and a booking drawer, a ruled drinks list you filter by colour, glass or bottle, table plans and a private hire planner.

An endless WebGL field of photographs you drag in any direction, with no walls: at speed every print splits into red, green and blue reads along its own direction of travel, while the print under your hand lifts and stays sharp.

A WebGL image slider that changes slide like a broken video file: drag sideways and the current photograph is dragged along in square macroblocks, the next one surfaces in its colours, then the frame heals block by block in a stepped sweep.

A full-bleed pile of satin ceramic 3D pieces with real mass. The pointer is an invisible force that parts the pile under a warm pool of light, pieces collide and tumble, and a click scatters the pile before it pulls itself back together.

A one-page online CV website: the A4 CV itself on an ultramarine desk, with a switch between a one-page and a full two-page CV, PDF download, print and email. Fills from your LinkedIn data export. Suits teachers, nurses, engineers, solicitors and graduates.

Five-page pub website template for pubs, inns, gastropubs and brewery taprooms, and a bar or restaurant website template for any venue with two rooms worth showing. The pub's badge rides the seam of a split photo hero: drag it to choose the bar or the brewhouse. A tap board you drag onto a flight paddle, a table you lay dish by dish and a pile of event cards to fling fill the inner pages.

A one-screen pre-launch waitlist page built round one product photograph: visitors drag the radio's tuning knob, static gives way to stations that tune in the price, materials and batch, and launch day holds the email sign-up. Worked example: a pocket radio from a Glasgow workshop.

A seven-page skincare brand website template for a beauty or wellness shop with one hero product. A bottle is held in place while the page scrolls and a hand rises to catch it, then the site calms into a quiet grey shop with a range, a product page, a journal and a working slide-out bag.

A radial pie menu for quick actions: a ring of sectors around one button, an accent wedge that tracks the pointer, child rings and drag-to-select.

An advent calendar of paper envelopes pinned to a cork board. Choose a day and its envelope lifts out of the grid, the flap folds back in 3D and what is inside slides out: a note that unfolds, or a vertical video clip that starts playing. Optional date lock, three paper themes.

A photographic jack-o'-lantern with real 3D form that is the light source for your page: its candle flickers across real content, nearer elements glow brighter and every card casts a soft shadow away from the flame. Carry it and it swings from its stem while the light follows; press it to blow the candle out.

A Halloween overlay that spins a real physics cobweb across the page: drag through it to stretch and snap the silk until it drops away and reveals what is underneath, with an option to have the web itself spell out a short phrase.

A WebGL photo gallery on a strip of 35mm film running between two spinning rolls that fill and empty as you browse: frames sit as negatives and develop into the photograph at the centre, with momentum, motion blur and a lightbox.

A preloader where your brand wordmark or logo mark fills the screen, its letters or shapes rising through a mask one by one, then the mark flies into the header's logo slot, as one block or piece by piece, as the page arrives around it.

A preloader and page transition shaped by your layout: hairline rules draw down the cover along your page's own columns, then the cover splits along them and the panels slide apart to uncover the page.

A preloader and page transition on one panel that only travels downward: it cycles your words on first load, then falls out of the bottom with an edge that bends with its speed. Between pages it enters from the top with the destination's name and carries on down onto the new page.

A preloader and page transition shot through a camera: autofocus hunts behind a viewfinder, the brackets lock onto the subject and one shutter reveals the page sharp. Between pages the frame dims, the next page is swapped in the dark, and the same lock and shutter reveal it.

A shared-element page transition for ordinary multi-page sites: click a project card and its image flies out of the grid to become the hero of the page it links to, while the index recedes around it. Back flies it home.

A release notes section for returning users: pick the version you last used and every newer release unrolls in sequence while a summary of new features, behaviour changes and fixes assembles.

An editorial room-set lookbook whose product cards grow out of markers on each photograph, hand over between pieces without closing, and add to a bag without losing the visitor's place.

A made-to-order product section: choose a wood and a seat, see the matched photograph of that exact finish, and read the price, lead time and next step.

A product finder where every answer re-ranks the actual range: the best match rises into a hero tier on a tile of its own colour with the reason it fits, the rest follow in a ranked row and anything ruled out steps back.

Pull any part of a portrait out like taffy and the face reacts: eyes follow your hand, widen in surprise, blink as it snaps back.

A grid of photos folds into a spinning 3D sphere you can fling around, then flies into a cube, a heart or back into a grid at the press of a button. Click any photo to lift it out at full size.

A GSAP and WebGL starfield background the visitor flies: stars drift quietly behind your content, press and hold stretches them into streaks, and release jumps to warp speed before a long deceleration back to drift.

A GSAP and WebGL dither background: a lit sphere drawn in 1-bit Bayer dots, the pointer is the light, and a click inverts paper and ink through a stepped dissolve that doubles as a light/dark theme switch.

A fifteen-page law firm website template for solicitors, lawyers, accountants and consultancies. Each page opens on one giant serif word cut through the middle by two flat colours, and every page change carries the next page's word in on a block of its colour.

A seven-page cybersecurity website template for security firms, managed IT providers, hosting companies and compliance consultancies. Flat rectangles on neutral grey, one saturated violet block with a live line drawing standing on its grid, and a page transition that fills the screen with that grid and opens the next page through one square.

A GSAP and WebGL silk background: a sheet of satin drifts in slow folds behind your content, the pointer moves the light across its sheen, and press and hold sends ripples out under the cloth.

One holographic light shared by a whole grid of cards: the borders nearest your pointer turn to iridescent foil with a white specular, neighbouring edges catch it, and a featured card carries a travelling foil beam.

An eleven-page portfolio website template for frontend developers, design engineers, product designers and freelance consultants. Every project has its own case study in its own colour, whole sections turn selected, and every page change runs as a text selection that lands on the next title in the destination's colour.

A background layer of springy dots: the pointer parts the field, a fast flick throws a V-shaped wake, and a click sends a ring through the grid.

A GSAP animated background of ink hairlines carrying light pulses into your call to action: the pointer draws a current, a click sends a ping through the whole network.

A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator.

Soft navigation for multi-page static sites with a physical page tear: the page rips along a perforated top edge, swings from its last corner and falls away to reveal the next page. Back re-attaches it.

An eight-page gym website template for class-based gyms, functional fitness boxes, fitness-racing and boxing gyms. A live LED countdown to the next class, a player that runs a whole class in 25 seconds, a filterable timetable and a sled-push page transition on every link.

A seven-page pilates studio website template for reformer, yoga, barre and dance studios and boutique fitness. Classes are colour-coded by spring, a Choose your spring picker finds the right one, and every page change slides the site sideways against four coloured springs.

An eight-page construction company website template for builders, contractors, property developers, engineering firms and consultancies. Four colour-coded sectors, a filterable project index, project pages with a draggable build timeline, and a page transition that builds each new page storey by storey.

A seven-page clinic website template for physiotherapists, dental practices, chiropractors, osteopaths and massage clinics. An interactive body map leads to treatment pages, and every page change opens through a vermilion disc that grows from the point the visitor touched.

A five-page furniture showroom website template for furniture makers, lighting studios, ceramic studios, product catalogues and independent design ateliers. A bold catalogue cover leads to four dedicated object pages through a three-dimensional catalogue page turn.

A seven-page portfolio website template for architecture studios, creative agencies, interior designers, landscape designers and photographers. Seamless animated page transitions connect its project browser, filterable work index, case studies and local enquiry draft.

A connected photographic print opens one image flat while its neighbours compress into deep paper pleats. Drag, tap or select to transfer the opening.

A printmaking workshop invitation whose paper folds reveal the project, day programme and practical preparation through independent physical hinges.

A photographic essay section with large scroll-driven apertures that open, hold and close around each chapter, with reversible image reframing and native reading links.

A studio enquiry form assembles a live project brief, then folds it into a sealed envelope for an honest email-draft handoff.

A photographic sculpture exhibition with a tactile magnifying lens, drag and keyboard exploration, artwork captions and practical visit information.

A complete seasonal restaurant menu led by a tactile draggable fan of substantial food photographs, with elastic tilt and spring settling.

Photographic product story with guided detail inspection, contextual annotations and a complete specification destination.

A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. One img tag per screen. GSAP scrubs the pose; three.js draws it.

A one-page site for a mobile game or consumer app with a real 3D phone that turns to a new screen as you scroll through four features, and a row of letter tiles that solves itself as the phone glides away. Store buttons, pricing with a monthly and yearly toggle, an FAQ and a scannable QR download block. Built to be adapted in an afternoon: suits word and puzzle games, trivia and quiz apps, education and language apps, habit and streak trackers, and any launch that needs a phone in the hero.

A one-page site for a mobile app with a real 3D phone that turns to a new screen as you scroll through four features, plus store buttons, pricing with a monthly and yearly toggle, an FAQ and a QR download block. Built to be adapted in an afternoon: suits consumer apps, SaaS products, fintech, fitness, education and any launch that needs a phone in the hero.

A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle. three.js and one shader; GSAP core runs the media branching, the load sweep and the release.

A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image.

A studio portfolio drawn as one engraved sea chart: scroll flies a camera from a world view down to each project island, where the case study opens in place. Suits creative studios, architects, agencies, destination brands and any collective with four to six places to show.

Multi-location directory section with timezone-aware operating arcs, dynamic day and time availability filtering, and responsive Flip visit drawers.

A careers section that draws every open role as a shift across one working day under a pinned hours ruler: set the hours you could work and the roles that fit rise to the top, each shift filling where it overlaps.

A calm Scandinavian shop footer: the site directory is a file of coloured index cards, and choosing a tab lifts that card out of the file and sets it down in front, beside the address, live opening hours and contact details.

A stats section where a sideways strip of action photographs rolls one giant odometer figure, reel by reel, as visitors swipe, drag or jump between results.

A dark product blog and changelog index where typing a query or picking a topic promotes the best matching post into a large lead slot, with the rest regrouping below.

A Swiss grid contact section: pick what your enquiry is about and a column of ink crosses the grid to reveal who answers, their direct line and which door to use.

A newsletter signup for a small hotel where a journal-style landing opens on past letters that fold in thirds, slide away and open again as visitors choose one to read.

A clients and logos section printed like a two-ink riso proof: a ruled sheet of client wordmarks where each marked case re-inks a live halftone photo and its story from the side you picked it.

Testimonials chosen by where each person started, told as a story you scroll through, with the same change of colour, headline type and photograph played by tabs or drag.

A how-we-work section where scrolling draws a path around an elliptical photo window, and each stage's photograph opens out of the point the path has just reached.

A closing call to action where the verb of each next step, set in giant wide capitals, parts around a photograph of what happens after the click.

Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal.

A pointer-driven type wave that widens and weights real variable-font glyphs while neighbouring letters compress and the word holds its width.

A preloader made from the page's own photographs: a small frame flicks through a reel as the images load, a counter climbs to 100, then the last photograph grows out of the frame and becomes the full-bleed hero.

An ink fill that enters where your pointer arrives, bows into the surface and drains through the edge you leave. Text stays perfectly still.

Five direct destination links with photographic panels or expressive typography. Hover and focus expand each route, and the last hovered route stays open.

A five-page fintech website template: a home page with a live running total and account dashboard, payments with a tap demo, pricing with plans and a calculator, customer stories and a sign-up page where a card terminal prints your receipt. Suits payments apps, business banking, invoicing and money SaaS.

An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph.

A single team photograph travels between six people as their individual stories enter view during the scroll, for team and about pages.

Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter.

Drag, throw or press the web's pet hates into Room 101: a heavy door eases ajar as they near it, pulls them into the dark and slams shut with a rattle.

A headline of glossy, air-filled 3D balloon letters on curling ribbon strings. Press one and its surface dents while the rest bulges, sweep across to knock letters into their neighbours with their strings trailing, and tap to pump a letter up until it squeaks back into place.

Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture. Release to hold its position, then choose Align light to restore the artwork.

Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.

Look through a rain-covered window into a misty forest. Wipe away soft condensation while refractive beads gather at the edges and rivulets run down the glass.

Scratch silver foil to reveal a photograph or discount code. Permanent tracks, directional flakes and an optional automatic finish, switched off by default.

A tactile material sample fan with a shared hinge and flexible fabric. Pull a swatch free, feel its give, then pin a shade and compare alternatives side by side.

An interactive 3D speaker with tactile rotation, three cabinet finishes, a removable grille and guided views of its controls, drivers and connections.

A PDF flipbook: point it at a PDF and read it in two-page spreads, dragging each page over with a real paper curl, momentum and selectable text.

A PDF reader with a page control that expands into visual navigation, searchable documents and a reviewed HTML reading mode for phones.

A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail.

A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person. Built around a warm editorial workspace example.

A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff.

A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration.

An architectural photography portfolio section with a drifting isometric image wall, a stable six-project index, readable project summaries and a square-on image viewer.

A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section.

A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note.

A photography-led transformation section with three room stories, a flexible before-and-after comparison and concise design notes beside the image.

An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation.

A product-first range selector with generated speaker cutouts, a seamless spatial carousel and complete fallback product cards.

A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it.

A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes.

A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters.

A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset.

A complete photographic showcase with a bold editorial masthead and two edge-to-edge image rows travelling continuously in opposite directions, plus click-to-pause controls, a built-in photo lightbox and static browsing fallbacks.

A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section.

An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition.

A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose.

Sculpt a lit three-dimensional landscape with a press or drag, as charcoal contours wrap around the rising terrain.

A photographic character field that resolves into finer glyphs and a clear image as a focus lens moves across it.

A sculpted metal sheet that dents under your pointer, bending brushed silver and copper reflections across its folds.

A three-column service business website with sticky navigation, an interactive service selector and an enquiry ticket. Includes bicycle workshop, dog grooming and home cleaning versions in one template.

An AI chat interface: replies stream in word by word behind a caret, sent messages fly into their bubble, with stop and scroll anchoring.

A hero background of clear, shallow water over a pale stone floor, with smooth river pebbles on the bottom seen through the ripples. Click the water to drop a pebble in with a splash, drag one along the floor to push a bow wave and nudge the stones it meets.

Beads of glossy black ferrofluid scattered across a hero: your cursor is an invisible magnet that tugs gently on hover; press and hold to pull the fluid into a spiked pool (or shove it clear in repel mode), then let go to throw it outward.

A hero headline that cycles its highlighted word: shared letters glide into place, the marker stretches to fit, and the rest of the sentence flows smoothly into its new line breaks.

Nine-page product brand website template with a real-time three.js glass bottle on the home page, then a product page, a four-item shop, a working bag, a live map of stockists and a journal. Worked as a fragrance house; suits skincare, spirits, candles and any single hero product.

A helical three.js pixel reactor, interactive materials programmes and a candidate workbench for research labs, AI startups and technical product websites.

A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline.

Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.

A draggable image explorer where selecting a hotspot pans the scene into composition, routes a live connector around the subject and settles a detail card into the clear side of the frame.

An activity feed timeline: new events stream in at the top of a vertical rail, a filter Flip-collapses hidden kinds and times tick live.

A password strength meter: a four-segment bar sweeps in and drains, rule ticks draw as each is met, with a confirm field match tick.

A monthly/annual pricing toggle: a sliding thumb, a savings chip that Flips in beside Annual, and plan prices that roll like an odometer.

A kanban board with drag and drop: cards lift and tilt as you drag between columns, other cards Flip aside and column counts roll.

An accessible FAQ accordion: answers open to their natural height, a plus morphs into a minus, with expand all and #deep links.

A notification bell dropdown: an unread badge opens an inbox with All and Unread tabs, mark as read, dismiss and a rolling badge count.

A photographic slider with a fuller row of images and restrained threads that fan vertically at the edges, with touch dragging, momentum and centre snapping.

A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll.

A ten-page infinite scroll website template for a creative production studio, and every page keeps scrolling: six case studies form one endless ring, while the home page, work index, studio and contact pages each wrap on to their own opening. Built for creative agencies, film and production companies, photographer portfolios, fashion labels and event studios.

Stir a photograph like ink in water. A real fluid simulation curls into eddies under your pointer and dissolves an ink-wash print to reveal the full-colour image, or a second photo, before it slowly heals.

Notes and prints pinned to a cork board. Drag one and the paper hangs from its pin, swings with your movement, then presses back into the board on release. Tie notes together with string that sags and sways, and write a new note that finds its own place.

A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through. Built with GSAP ScrollTrigger.

An editorial website for design agencies, creative portfolios, architecture studios, publishers and product consultancies. FORME pairs bold typography with interactive identity artwork and expandable project stories.

A before-and-after reveal with a flexible image boundary. Drag the slim grip to bend the divider, flick to throw it, then watch the edge spring straight.

Thirteen-page boutique hotel website template with a dark-green contents rail: a filterable room explorer, six room pages with galleries you can handle, a seasonal supper menu, a walking guide on a real street map and a three-step enquiry with a calendar. Designed for hotels, B&Bs, guesthouses, country retreats and wedding venues.

An inline edit field: click a value to edit it in place, with optimistic saving, a pending shimmer, and rollback with Retry when a save fails.

A slide to confirm button for irreversible actions: flick or drag the thumb to confirm, with spring return, async pending state and a button fallback.

A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension.

Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils, driven by GSAP ScrollTrigger.

Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve.

Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.

A five-page florist website template on one saturated colour: the shop's name runs wall to wall under a jug of flowers shot on paper of the same blue, the first screen splits ordering from weddings, the bunch page builds the bouquet stem by stem, and one order slip follows the visitor across every page. Re-point it to a flower shop, a wedding florist, a plant shop, a cake maker or a candle maker.

A soft multicolour border that blooms inward and sends paired ripples around rounded edges on edge movement, click or tap. Three.js renders the glow; GSAP shapes the pulse and settle.

A twelve-page website template for an outdoor adventure or small-group tour company, with a trip finder on a real relief map, measured journey profiles, a draggable season strip and a guide wall. Suits adventure travel, tour operators, walking holidays, cycling holidays and ski or surf schools.

An eight-page design studio website template with a giant folding type sculpture, stacked campaign posters and a hands-on toy on every page. Suits design agencies, creative studios, art directors and event identities.

An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.

A seamless vertical portfolio carousel that bends into a sculptural photo ribbon as you scroll or drag, with a crisp project link on every slide.

A dark multi-page creative studio portfolio website template with a sculptural photo reel, six case-study pages, a filterable work index, a studio page and an enquiry page. Suits creative agencies, photographers, design studios, architecture practices and filmmakers.

Animated tabs: the indicator slides and stretches between tabs, panels change directionally and the container eases between heights.

A drag and drop sortable list: the row lifts and follows the pointer while the others slide aside, with full keyboard reordering.

A drag and drop file upload: dropped files land as rows, progress bars count up, finished uploads draw a check and failures offer Retry.

A custom select dropdown in single and multi-select: type to filter, a sliding highlight, chips for chosen values and a real hidden select.

A date range picker: a date field opens a calendar popover with presets, a hover preview of the range and a staggered fill on selection.

An infinite shoppable card gallery that follows a winding line, with wave-led tilt, soft momentum and clickable product actions.

Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.

Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. Scroll down through three expressive scenes.

Nine-page wedding photographer website template laid out like a printed album: every photograph shown whole on paper, a hero strip of frames from one evening, and each wedding told by the clock from getting ready to the last song. With a Saturday date check, self-pricing collections and an enquiry form. Suits portrait, family and elopement photographers, videographers and small venues. Shown as a Falmouth photographer working across Cornwall and Scilly.

A nine-page horizontal scroll website with two switchable looks, a plaster gallery and a dark glass, where every page travels sideways past tall photographs set edge to edge. Visitors watch a sign go together, rake a lamp across gold leaf and type a name that widens the page and counts the price. Worked example: a glass gilder in Birmingham. It re-points to a gallery, an architecture practice, a creative agency, a maker or a photographer.

An eleven-page fullscreen slider website template: full-bleed photographs wipe through one frame with a live rate and a floor plan. Suits venues and studios for hire, coworking and event spaces, wedding venues and small hotels.

A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back.

A nature-led one-page site for a national trail, outdoor brand or landscape project: four full-bleed photographs pinned into a scroll-scrubbed journey, a live type specimen you type into, and a lens that samples the palette off a hillside.

An exit intent popup for promo codes and email capture: exit, scroll, delay or manual triggers, frequency capping and an accessible modal.

A GDPR cookie consent banner: a compact card Flip-morphs into per-category preferences, fires a consent event and remembers the choice.

An announcement bar for sites: pushes the page down instead of covering it, rotates messages with a masked swap and collapses on dismiss.

A four-page SaaS website template built to be rebranded in minutes, with real personality: a saturated brand colour as a full ground, huge display type and chunky run bars as its graphic language, all from one block of colour, type and shape tokens. No photographs to replace. Links fetch the next page and swap only the main column, so the header, mega menu and theme survive every navigation. Re-points to a developer tool, an API product, an analytics or fintech SaaS, an agency or any multi-page marketing site.

A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle.

An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion.

An avatar group for collaborators: overlapping avatars part on hover, one tooltip travels between them, with an overflow chip and roster.

A multi-step form: each completed step compresses into an answer trail and the submit button springs into a confirmation receipt.

An OTP input for 2FA and verification codes: digits land with a bounce, paste fills every box, and a wrong code shakes and clears.

A dual range slider for price filters: two thumbs that cannot cross, a histogram that lights bar by bar, a rolling result count and typed min/max.

A star rating input on native radios: hover sweeps the fill to the pointer, a click locks it in with a spring pop and a label.

A product onboarding tour: the page dims except a spotlight that scrolls to each step and morphs between them, with a card that flips to the side with room.

A mobile bottom navigation bar: the indicator stretches between tabs, panels swipe with the finger and the bar hides as you scroll down.

A scrollspy table of contents for long pages: a marker slides to the section in view and a progress line tracks reading.

A copy to clipboard button: the clipboard icon morphs into a drawn check, a Copied label floats up and the copied value flashes.

An animated like button: the icon springs, a particle burst fires and the count rolls over one digit at a time.

A skeleton loader: shimmering placeholders crossfade into real content with a stagger, and each card's height eases to what it loaded.

A sortable data table for dashboards: row selection, a bulk-action bar with Undo, filter and pagination, and rows that travel with GSAP Flip.

Filter chips for product and portfolio grids: multi-select chips above results that re-flow with GSAP Flip while the count animates.

A spotlight search modal for apps and docs: opened from the search field or the / key, with grouped results, a preview and full keyboard control.

A progress stepper for checkouts and onboarding: the track fills to the active step and completed steps flip into a drawn checkmark.

A loading submit button for any button: pass it a promise and it morphs into a spinner, then a drawn checkmark or an error shake, announced to screen readers.

An iOS-style toggle switch on a native checkbox: tap or drag the knob, it snaps to the nearer side and the track colour cross-fades.

A quantity stepper for carts and booking forms: digits roll like an odometer, with hold to repeat and a shake at the limits.

A tag input for forms: type, paste or pick chips that spring in, drag or Alt+Arrow to reorder, with a suggestions list and a mount() API.

An autocomplete search dropdown: grouped results filter as you type with matches highlighted, a highlight slides under the arrow keys.

An animated tooltip that travels between targets: one bubble tweens its position, size and arrow instead of blinking out and back in.

A right-click context menu for lists and tables: per-row items from data, typeahead and submenus, springing out of the corner nearest the pointer.

A slide-out drawer for settings, carts and filters: flick to dismiss, rubber-band pull, a backdrop that tracks the drag, left or right.

A collapsible sidebar menu for docs and admin apps: sections open on a measured height tween and an indicator slides to the current link.

A fullscreen hamburger menu: the burger icon morphs into an X while the overlay wipes in and the links stagger up, with focus trapping.

A segmented control for view and timeframe switching: the indicator stretches as it slides, with icons, disabled and loading states.

A pricing slider for SaaS plans: the price counts up as you drag, tiers snap magnetically, and a monthly/annual switch re-tweens the total.

A Cmd+K command palette: fuzzy filtering, nested pages that slide in with a breadcrumb, and a panel height that morphs as results change.

Toast notifications for web apps: five types, undo actions, a pause-on-hover countdown, swipe to dismiss and a promise helper for loading states.

A multi-detent bottom sheet: peek, half and full, snapped by release velocity, with scrollable content that hands the gesture back to the sheet only at the top of the list.

An accessible animated modal dialog: the button you press morphs into the dialog and back, with side and centred placements, stacking and focus trapping.

An animated navbar with a sliding pill: it leans toward the cursor, stretches as it travels between links, and keeps the active link in view.

An animated mega menu for site headers: the flyout panel morphs between section sizes instead of popping, and its columns stagger in behind it.

A macOS-style dock menu for app shells and dashboards: icons magnify under the cursor, badges pop, and items drag to reorder.

A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle.

A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll.

A spatial and exhibition design studio site with a photographic depth corridor, a cursor-tilted cluster, and project images that open to full bleed. Suits architecture, interiors, photography portfolios and arts venues.

A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.

A one-page site for an independent industrial design studio, built as two committed full-height fields — an ochre one and a near-black one — divided by a seam the visitor can actually drag. Scroll sends the two fields in opposite directions, the headline straddling the divide is knocked out correctly on both grounds, project plates are dealt out from the seam in a pinned sequence, and a second seam further down bends toward the cursor.

A headline made of tens of thousands of GPU particles that dissolves in a gust and re-forms as the next word on click, while the cursor blows through the letters like wind. three.js, one shader, GSAP core.

A full-bleed WebGL slider driven by the scroll wheel. A distortion field sits in the middle of the container and bends whatever scrolls through it: the panel at the front stays flat and sharp while the ones either side curl away and smear into a spectrum, mirrored on both sides.

A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.

A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click.

A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point.

A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow.

A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. Flick and the mask breathes: it inflates, the edge splits into an accent and a chalk fringe, and the footage speeds up.

Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.

Seven-page website template for an AI image tool or any creative SaaS: a full-width output on a saturated ground with a version pad that swaps 16 stored pictures, a colour-flooded gallery, a live Regrade panel, a credit calculator and a same-prompt changelog. Suits AI image, video and 3D tools, photo editors, stock libraries and any usage-priced SaaS.

A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline.

Five-page jewellery website template on a committed garnet and pink colour field: cut-out pieces on tonal tiles, a workshop hero, a made-to-order piece page with metal, size and engraving, and a raking light you sweep across the metal. Suits watches, eyewear, ceramics and any made-to-order shop.

Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.

A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.

A seven-page record label site that opens on a drifting field of sleeves and night photographs you can drag, throw and pull a record from. Every release owns one flat colour, worn by its sleeve, its poster card and its whole page. Worked example: a dance label in Leith, Edinburgh.

An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.

Six luminous colour orbs stay distinct as they drift and lean with the pointer, then rack into crisp blend-mode discs when you press and hold.

A scroll-linked palette system: each section declares its colours and the page background, text, rules and accents transition together as you scroll, with text contrast guaranteed at every point of the blend.

A vivid mesh-gradient background of drifting colour with a bright lead bloom and a slower halo that follow the cursor across the page, built without canvas or WebGL.

Five-page brewery and taproom website template in safety orange and stainless steel: a hero of three arch-topped photographs, a brew day you drive tank by tank from mill to keg, spec sheets for every beer on tap, a departures board for the week and a tour booking that prints a ticket.

Interactive elastic strings that bend around your cursor and twang back with damped oscillation — with an opt-in sound toggle that voices every pluck as a synthesized, guitar-tuned string note.

A six-page sports club website template built like a matchday poster: a true-colour match photograph over a solid kit-colour band with the last result at poster scale, a fixtures rail of tall date columns you drag to change the poster, a season scrubber that replays the league table, a squad of giant shirt numbers, a stand picker for the ground and a live membership card builder.

A GSAP page-turn effect with curved paper, moving highlights and momentum. Drag or flick through a lookbook, with touch and arrow-key controls.

A fullscreen nav overlay that arrives as layered clip-path curtains, oversized type masking up on a stagger, and a preview plate that wipes in the direction you moved.

Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically.

A hanging fabric banner you can grab, drag and swing: a soft-body cloth simulation that warps your artwork across it and shades its own folds.

Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.

Thirteen-page API documentation website template with a home page you can operate: a real image request set large across the window, where dragging any value in the URL really changes the photograph. Parameters beside a sticky console, full-text search, and language and version switches that rewrite every page. Suits API, SDK, developer tool and product docs.

A six-page chat app landing page template with the working app behind it: home, pricing, changelog, sign-in, the app and a components page. The conversation already runs on the home page, visitors can join in and rewind the morning, and it re-points to any chat, community or messaging product. Worked example: Chatter, group chat for a removals firm in Leeds.

A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.

A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.

Nine-page creative agency website template with a home page you can pick up: true ad formats you drag, stack and open on a saturated table, then calm full-bleed case studies. Suits ad, PR, film and in-house brand teams. Shown as Maureen, an ad agency in Leeds.

A six-page site for a branding agency or design studio whose work is identity in use: a dense wall of photographed signs, towels, tickets and posters, filtered by a sentence with two blanks. Case studies tile each client's system edge to edge, then hold the reasoning still while the applications scroll past.

A seven-page site for a web design studio, led by one signal colour on stone: a poster-size word changes with each client while their photograph changes beside it, and every project arrives as a full band in that client's own colour with working website screens. Shown as Tallow & Finch, an Exeter studio building shops for food, drink and retail.

Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity.

Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing. No physics library, just GSAP.

Scrollytelling page for any long-form piece that argues from evidence: journalism, research, policy, campaign reports. Three scroll-locked stages pin a media column that crossfades photograph to photograph as the reporting scrolls past, documents whose redaction bars wipe off as you read, and a right-of-reply block.

Eleven-page recruitment agency website template on loud colour slabs: a poster-size sentence that filters a board of notched job tickets, an anonymised candidate shortlist sent as one brief, a candidate and employer flip on the home page, a salary guide and a fee calculator. Suits hospitality, IT, marketing, care and trades recruiters.

Seven-page website template for financial planners, accountants, mortgage brokers and any adviser who sells a relationship: the people are the hero, as cut-out portraits on colour shapes. Visitors drag life events onto a kitchen table to build the agenda for a first meeting, and the booking page arrives pre-filled.

Six-page website template for theatres, cinemas, concert halls and arts centres, built schedule first: a date strip and filters for genre, space and access re-sort every performance, production titles are set huge across their photographs like posters, and one highlighter yellow marks tonight, premieres, few-left and access shows.

A ten-page news website template for a regional paper or magazine: a front page with a giant nameplate, a rail, a lead and a running Latest feed, a reusable section page, a news article, an author page and three long reads, about 40 stories in all. Colour bands, five palettes and no build step.

A six-page bento grid website template where visitors drag tiles to rearrange the page: every page has its own composition, a finish picker repaints the site and layouts are remembered. Worked as a Sheffield toaster maker; suits SaaS, mobile apps, gadgets, fintech and agencies.

One-page editorial website template for a practice, author or consultant fronted by one person: a saturated cover with an enormous cut-out portrait whose headline wraps both sides of her and re-sets live as you drag.

A velocity-reactive image effect that peels one photograph into alternating horizontal slats with directional depth, warm edge light, and a zipper-like settle.

Airport-departure-board character flipping for headlines, stats and status rows, with each cell rolling on a real 3D hinge and the board resolving as a staggered wave.

A soft aperture follows the cursor and reveals a completely different layer hidden under the visible one, stretching into a lens streak on the axis of movement and springing back with an elastic settle.

Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.

An editorial link-in-bio page for a fashion model and lifestyle creator: a Didone contents index whose covers follow the cursor and cross-fade as you move down the list, with a shipping four-palette persona switcher.

A phone-first digital menu made to open from a QR code at the table, with a sticky category bar that crossfades between sections and dietary chips that filter every dish at once.

A nine-page art gallery website template where each show is a full-screen photograph of the room, the next show slides over the one before, and the gallery's name is cut out of the photograph in giant letters tinted the show's own colour.

Multi-page tour operator website template on a committed bougainvillea magenta, with giant colour-on-colour headlines and a page for every trip where you drag along a measured climbing profile to move a rider along the real route on a live map. Worked example: a small-group cycling company in Girona with five trips.

Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.

A free creator profile page whose link cards toss onto the page like stickers landing on a desk, drag anywhere with momentum, and tween back into a neat stack on 'Tidy up' - while a tap always just opens the link.

Six-page cocktail bar website template in five flat, saturated colours, one per taste on the drinks list: photographs cut by angled colour planes, a menu you browse by taste where the page floods with each family's colour, a filterable What's On list, a private hire planner, booking and gift vouchers.

Five-page interior design website template with a split colour-field cover, a project index where each room is framed in a colour mat on hover, and a full-bleed before/after wipe. Suits interior designers, architects, kitchen makers, renovation firms and home stagers.

A WebGL water ripple for any image: drag across it and rings of waves spread from the pointer, cross and interfere, bending the picture, then settle to a calm pool.

A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip.

A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus.

A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk.

An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot.

Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene.

A draggable 3D ring carousel where cards stand on a cylinder in real perspective. Flick it hard and it spins with momentum, motion blur, and a velocity-driven tilt before an elastic snap locks the nearest card front and centre. Opt in and each card becomes a button that spins to the front and Flips open into a full detail lightbox.

A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.

Six-page planetarium and science centre website template on a cream engineering-drawing grid: titles set up the side of framed photos with numbered callouts, a tuning-band nav, a radio dish you slew across tonight's sky, spec sheets, filters and a real map.

A five-page magazine website template for a print publication: the current issue lies on a stone tabletop and visitors drag it open to thumb through its spreads, with a contents page, a reusable story page, a table of back-issue covers and a subscription builder. Worked example: Tidewrack, a quarterly about the working coast from Whitby.

Five-page online course website template for a small school, shown as two complete worked courses: a street photography school in Porto and a digital illustration school in Glasgow, each with its own palette, typeface, copy and pictures. A full-bleed course trailer with the syllabus as a ruler, courses told by their teachers, a syllabus ruler where every lesson is a tick as long as the lesson, a free lesson player, a teacher page and enrolment with a pace planner. Suits photography, drawing, cooking, music and language courses.

A complete load sequence: a counter climbs to 100 behind a full-screen overlay, the overlay clears with one of four exit styles (curtain wipe, split doors, iris, or fade), and the page content staggers in behind it.

A one-page food truck website built around this week's pitches: seven tear-off tickets on a real street map, a hatch board of cut-out dishes and a catering quote that stacks trays. Suits street-food vans, coffee carts, pop-ups and market traders.

Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot.

A six-page site for an independent bookshop where every book looks like a real paperback: a shelf of mixed spines you pull to open the book on the table below, and a front-table hero whose colour changes with the featured cover. Grainger Street Books in Newcastle is the worked example.

Seven-page tattoo studio website template that knows what day it is: a live status bar says who is in and whether walk-ins are open, every artist carries a books badge, and a catalogue of painted designs shows which are still available to book. Shown as a six-chair Philadelphia shop; suits piercing studios, barbers, salons and any booking website.

A free link-in-bio page, links first: a giant wordmark on one loud colour, a small pile of photo prints for the three latest things (flick one away to see the next, tap to open) and the full list of links on the first screen. Mariam Odede, a potter in Margate, is the worked example; it suits musicians, podcasters, small shops and writers just as well.

Four-page wedding website template on a loud colour ground with a before and an after: an envelope addressed to each guest that opens into the invitation, a map that follows the day, a multi-guest RSVP that seals its card, then a thank-you, a recap and the photos dealt from piles of prints.

A free one-page appeal template where visitors give by packing a crate: drag tins, pasta and nappies off a shelf, watch the total rewrite what the gift does, and carry it into the donation form. Worked as a Sheffield food bank's winter appeal.

A coming soon page on one bold colour: the opening date split around a capsule photograph that opens to full bleed as you scroll, a numbered list of what's coming where unreleased items sit under black bars visitors drag back to peek, and a signup band that prints a queue ticket. Worked example: an Italian deli and wine bar opening in Liverpool.

A six-page gym website template for a strength gym or barbell club that sells a written program: suits gyms, personal-training studios, powerlifting and weightlifting clubs, boxing clubs and climbing walls. Worked example: a Brooklyn barbell club lifting since 1934, on one committed racing green with a book serif. The signature is a real loaded barbell you drag to set your one-rep max, set under the home page photograph and carried onto the Program page, where every week of a twelve-week block is worked out in plates.

A five-page website template for podcasts, radio shows, DJ mix series and interview programmes, with a player strip that keeps playing while visitors move between pages. Gigantic compressed type, real room photography, hairline episode index rows, neon for everything live and cobalt for editorial blocks; Back Room Tapes, a music-and-making show recorded behind a Sheffield record shop, is the worked example.

A five-page shop and café site where every product owns a saturated colour, so the range reads as a colour field on a neutral grey ground. Visitors deal the whole shelf as a fanned stack of bags, filter the shop by flavour, dial a brew guide and pack a subscription box. Worked example: a speciality coffee roaster in Norwich.

A seven-page site for a small collection of holiday cabins, cottages or glamping units: each stay has its own page and colour, a who's-coming filter reshapes the comparison, and a drag-across-nights calendar prices every night per cabin.

Five-page website template for any business whose product is a colour or a finish: nail studios and salons, hair colour, paint, tile and textiles. A photographed hand is painted coat by coat in the shade you pick, and the shade fills half the page, the whole shades stage and every booking band, then rides into the booking form. Shown as a two-chair Brighton nail studio.

Six-page site for any business where the customer books a person by name. Pull a colour tab down the hero and the page switches to that person, their colour following them through the team, their profile and a booking flow that floods with it. The demo is a three-chair barber shop in Deptford.

A seven-page estate agency site built on solid colour panels set against sunlit house photographs: a draggable deck of featured homes repaints the home page, listings reshuffle and open on a real map, and every property gets a floorplan you can tour room by room. Worked example: an independent agent in Bristol.

Six-page yoga studio website template for hot yoga, pilates and breathwork studios, saunas, bathhouses and spas. A temperature dial swaps the rooms inside the hero photograph, today's classes sit on the home page, and the timetable lights up one class type across the whole week. Shown as a heated yoga studio with a wood-fired sauna in Margate.

Five-page portfolio website template for photographers, videographers and illustrators: the whole archive is the home page, every frame small and at its own shape, and a category filter and frame count reflow it in place. Every frame opens its project: twelve commissions and series drawn from one data file, each as a book or a contact sheet. One saturated colour floods whole sections, with five colour-and-type presets. Shown as a Bristol portrait and editorial photographer.

A four-page SaaS site set in a big serif on flat tomato, moss and ink bands, where every product view is a live HTML window collaged over a colour slab and a real photograph. Visitors drag shifts on a rota and watch the wage bill recount. Worked example: rota software for cafes.

A one-page landing page template where the headline is the booking form: coloured pills inside the sentence are the choices, the offer's date, price and places left recount beside it, and a floating pill carries the sentence down the page into a prefilled form. The demo switches between four worked examples, a pottery course, a sea swim school, a sourdough course and a beginners' running club, each in its own colour and type.

A seven-page developer portfolio with a hardware catalogue home page, where each project is shown where it runs: in a browser, on a phone, on a counter tablet or in a terminal, stepped by a real key. Worked example: an interface engineer in Malmö.

A personal CV site that morphs between two layouts: a signature Flip-driven toggle reflows the whole page from a spacious web resume into an A4 document, backed by a real print stylesheet so the site is also the PDF.

A six-page clothing brand website: hand-lettered paper stickers over full-bleed photography, a shop filtered by fit and wash, a product page where you drag the jeans through two years of wear, and a bag page. Worked example: a selvage denim workshop in Leith with free repairs for life.

Five-page site for any practice that sells on buildings and colour: architects, interior designers, developers and design-and-build firms. Full-bleed photo chapters carry huge condensed figures, a wall of photo columns drags and throws, and the menu opens giant words in one electric ink.

A five-page restaurant site laid on a red tablecloth: one dish fills the home page, and on the Menus page printed menu cards lie scattered on the cloth for visitors to pick up, drag, flick aside and turn over for allergens. Worked example: an oyster and natural-wine bar in Bristol.

A six-page product launch website: the bottle is the headline, picking a flavour retints the whole page, numbered callouts zoom the packshot onto each detail, and a pre-order page builds a box of three or six. Worked example: a non-alcoholic aperitivo from Cornwall.

A six-page music festival website template in a black-and-white poster style: square crowd photography, condensed italic headlines, black marquee bands and type rails down both edges, a lineup player that keeps playing between pages, timetable picks, wristband tickets and a site map.

A six-page portfolio website template for graphic design studios, branding agencies, freelance designers, illustrators and photographers. Clients arrive in their own colours: a deck of coloured cards you throw off the pile, a work index that floods each row with the client's colour, and case studies that open on the client's colour with its mark at full size.

Pinned scroll storytelling with GSAP ScrollTrigger and MotionPathPlugin: a route draws across a chart as the reader scrolls, a camera pans and zooms to frame each leg, and each stop's card slides in beside it.

Organic blob masks that morph between shapes with MorphSVGPlugin. Portraits live inside drifting blobs that settle into a circle on hover.

Swipeable card deck powered by Draggable and InertiaPlugin. Throw the top card to send it to the back; momentum decides dismiss or spring-back, and the rest of the page follows whichever card is on top.

A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline.

Velocity-aware image trail for a list of links: layered card drift, directional tilt, staggered decay, and static touch previews. Every card keeps its own photograph's shape. Pure GSAP core.

SVG paths draw themselves as you scroll using the stroke-dasharray technique. Scrubbed or play-once modes, works on any SVG shape, no DrawSVG plugin required.

Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay.

Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses.

A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands.

A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks.

A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.

A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.

An ember-toned Canvas 2D flow field that bends into a dense wake around pointer, touch, and keyboard attraction before dispersing organically.

Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.

Shared-element layout transitions with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.

Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.

A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, colour morphs, and touch previews.

Five pinned editorial chapters that assemble word by word as you scroll. Slides from both edges, a vertical rise and a blur-to-sharp reveal, with a velocity lean that settles after every flick.

Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.

Characters react to cursor proximity with push, pull, wave, or rotation effects. The pointer field can be read from a whole section, buttons anywhere on the page can switch mode live, and a second channel can tint or blur the characters nearest the pointer.

A GSAP glitch effect in four styles: displacement shift, RGB chromatic aberration, VHS scan slice and character-level chaos. Hover, click, scroll or interval.

Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.

A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.

Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.

A GSAP liquid morph hover effect in WebGL: photographs melt into thick, glossy liquid that sags, smears and drips, then pull back together crisp.

Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.

A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real text. Scroll, hover, click or auto-play, in any accent colour.

Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore: cards near center grow larger.

Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.

Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.