Mouse-driven Orbit
sectionAdd restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and splitting it across camera translation, look-at, and small object rotations. Use for passive cinematic 3D heroes, pointer-responsive scenes, organic model parallax, and interactive depth where OrbitControls would feel like a product viewer.
Example: Ondo Roasters: an independent roastery's hero where a procedural coffee branch, ripening cherries and roasted beans turn toward the pointer in a shallow damped orbit while a sage bough drifts behind the copy.
Add Shader Cursor Trail
sectionAdd the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain web projects.
Example: Drift-12, a fictional 12HP Eurorack voltage source by Ferrous Modular that 'remembers where your hand has been': a near-black hero where the exact six-node Shaders graph (ChromaFlow-driven DotGrid mask, chromatic ripples, film grain) leaves a white twinkling halftone trail behind the cursor, followed by the module's faceplate, knob notes, specs and a reservation form.
Agency Grid Layout Minimal
websiteCreate a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
Example: Parapet, a fictional New York urban beekeeping co-op, presented as a minimal agency site on a strict 12-column grid: oversized tight-tracked Inter Tight headlines, tiny mono uppercase metadata, a greyscale rooftop panorama, hover-shifting practice rows, and an off-white sheet that overlays the page with a honey-by-postcode ledger.
Ambient Section Particles
sectionAdd a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, responsive limits, and reduced-motion fallbacks. Use for petals, leaves, snow, sparks, confetti, dots, paper, icons, or brand fragments that support a section's mood without obscuring content.
Example: R/V Calder, a fictional deep-sea research vessel on a marine-snow transect: a canvas layer of slowly sinking snow aggregates and rare bioluminescent motes behind the hero (with a quiet reading zone, gentle pointer wash and a 'Pulse the thrusters' gust control), and a second bounded layer where the snow settles into a height-capped seafloor bed.
Animation On Scroll
sectionCreate an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
Example: Platen Type Co., a fictional indie type foundry launching Sorrel Grotesk: a paper-and-cobalt specimen page whose hero plays a four-part reveal timeline (eyebrow, headline, specimen, details) with a Replay control, then sequences weight rows, glyph tiles, a pull quote and licence cards as they enter the viewport.
Animation Systems
websiteUse when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
Example: Tiergarden OS, the motion spec for a fictional Leipzig vertical farm: a hero GSAP timeline in four labelled beats (grow rack lights tier by tier, headline, live readouts, CTA) with a beat progress bar and Replay, then the token table (durations, easing curves, offsets, stagger) as runnable demos, a grow console with a morphing tab indicator, switch, toast and hover-lift cards, choreography rules and a reduced-motion preview toggle.
Atmosphere Background
sectionCreate a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.
Example: Vey Lume Works, a Ghent vintage-watch restorer: a fixed near-black atmosphere of drifting lume-green light folds pools into a lower-right bloom behind the hero, a live timegrapher bench readout and the restoration process.
Background Grid WebGL
sectionCreate a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.
Example: Holdfast, a chain of six late-night bouldering halls drilled on one 200 mm bolt pattern, set over a Three.js perspective floor grid that drifts toward the horizon with chalk-dust particles, a single orange circuit lane and damped mouse parallax.
Beam Glow States
sectionCreate React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.
Example: Kettle Hill Observatory & Planetarium's public telescope console, where border beams mark real state only: an ocean pulse-inner while the mount slews, a slow one-lap mono beam on a newly chosen target or saved dome show, a line beam on the ask-the-sky bar for focus and lookup, and a single sunset pulse-outside on the show still in the dome.
Beautiful Shadows
sectionApply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.
Example: Ode Clay Studio: a light stone-and-white shop page for a Porto ceramics studio where one Beautiful lg plinth holds a hand-drawn moon jar, Beautiful md popovers and piece cards sit around it, and Beautiful sm carries every pill, input and button.
Blue Cloudy Clean Modern
websiteCreate a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.
Example: Alda Motors, a Porto electric-motorcycle startup: a full launch site for the S1 floating on a drifting cobalt-to-pale-azure cloud sky, with thin white rails and corner squares, a masked-word hero with an italic serif accent beside a white line drawing of the bike, glass capability cards, a ride-mode switcher, a rider quote and reservation editions.
Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.
Example: Lightline, Corvane Museum of Natural History's open scan room: a thin blue scanning laser and eighteen slow wave bands sit behind frosted glass shells, a live specimen-scan console, a four-step process and a visit panel.
Book Serif Index
websiteCreate an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.
Example: The Corvina Ledger, the bound session archive of a fictional 1950s Baltimore jazz label: a dark catalog shell with a mono index rail around an aged-paper folio spread (drop caps, marginal notes, a sleeve-and-disc plate, dotted-leader track lists), followed by a catalogue of issues, a personnel register set like a book index, an essay on the masters and a colophon.
Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.
Example: Kammlinie: a live bed ledger for fourteen alpine huts on a fictional crest, laid out as a hard-framed split console whose right half is a Three.js ridge drawn in eighteen glowing contour bands, swept by a signal beam and pinned with hut beacons the stage selector flies to.
Awwwards-quality Sites
websiteArt-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.
Example: Vell Halo, a fictional benchtop live-cell imager: the hero is a microscope eyepiece where the whole slide reads as label-free phase contrast and a pointer-driven objective reveals the fluorescence channels, followed by a pinned, scrubbed fourteen-day confluence chart, instrument, workflow, channel list and a loan-unit request form.
Interactive Particle Trail
sectionBuild a cursor or touch particle interaction that emits by distance along the traveled segment into a recycled GPU point pool, with optional keyboard-triggered bursts. Use for interactive particle trails, pollen lifted from a surface, dust disturbed by a pointer, hover particle bursts, and discrete motes whose spacing must stay consistent at different gesture speeds.
Example: Mill & Morrow, a fictional neighbourhood bakehouse on Alder Row: a procedural three-strand braided loaf lies on a rye-stone bench, and the pointer lifts discrete flour grains along its path — emitted every 7 units of travel, never by the clock — with a 'Dust the bench' burst button and a pale 'this week on the bench' menu below.
Three.js Scroll Worlds
websiteBuild rich, scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters. Use for 3D scrollytelling, scroll-driven WebGL worlds, camera journeys, interactive portfolios, product stories, exhibitions, explainers, game or film microsites, spatial narratives, and multi-scene websites where native scroll should travel through one continuous place. Not limited to landing pages.
Example: Tern Orbital, a fictional sun-synchronous imaging operator: one persistent Three.js world (procedural planet with clouds, city lights and atmosphere, a modelled imaging satellite, its pushbroom swath, a ground station and a 12-bird constellation) conducted by native scroll through six chapters, from orbit down to the downlink and back out to the night side.
Wireframe Scan Reveal
sectionReveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away. Use for wireframe scanning, radial mesh reveals, survey pulses, holographic assembly, topology intros, and 3D model entrances where a plain opacity wipe does not explain the form.
Example: Relay Nine, a worker-owned bike courier collective, surveys its procedural Three.js cargo frame: a pale topology cage sweeps in from a low-left origin and the safety-orange steel follows 520 mm behind, then the cage burns off.
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
Example: Verdigris, a fictional slow-perfume house in a copper-roofed Ghent chapel, built on one motion language: a four-part hero timeline (media, headline, copy, action) with a visible sequence strip and Replay control, mouse-reactive depth layers, word and line mask reveals, clip image reveals with layered parallax, a pinned three-note anatomy scene, a pinned horizontal collection with tilt cards, magnetic buttons and a labelled cursor follower.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
Example: Vesper Line, a fictional Lisbon-to-Innsbruck sleeper train, told as one 37-hour journey: boarding preloader, parallax night-sky hero with masked headline, scroll-scrubbed manifesto, a pinned night-to-dawn scene with a running clock, a sticky stack of window views and a parallax arrival footer.
Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.
Example: Ashgrove, a fictional esports club that "trains quietly so it can play loud": warm beige shells, a framed hero with match/player/ethos cards, a four-step tryout process grid, a training-week app shell, roster, bento and FAQ.
Cobe.js
sectionUse when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).
Example: Ferro Lund Arquitectos: a Lisbon studio's atlas of nine buildings in nine climates, on a limestone cobe globe whose oxide arcs run from the studio to each site; picking a project turns the globe to it and its anchored label lights up.
Company Logos
sectionUse Iconify Simple Icons logos (64x64) instead of text logos.
Example: Brisa North, a fictional North Sea wind farm operator: a pale instrument-panel hero with turning turbines over a hairline-divided supplier logo row, then a 16-cell partner grid and a turbine anatomy legend — every mark an Iconify Simple Icons glyph in a shared 64x64 box, monochrome until hover/focus restores its brand colour.
Container Lines
websiteAdd vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.
Example: Leafhold, a fictional single-estate tea importer in Rotterdam: a warm-paper catalogue site where two 1px guides mark the 1120 px container from nav to footer, each band's full-bleed hairline is pinned by 6 px corner squares where it crosses them, and every grid (lot table, gardens, brewing panel, route) divides along the same edges.
Corner Diagonals
websiteApply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
Example: Setline Surf School: a dawn-patrol surf school site where every button, slot picker, readout, lesson card, timeline block and the dark seven-day swell board share one chamfer family (8 / 14 / 24 px, top-left + bottom-right with mirrored counterparts) over a drifting sunrise-and-sea gradient.
Corner Lasers
sectionCreate a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.
Example: Seamline, a business account for freelancers: three hairline lasers — invoices in, tax reserve, pay yourself — run along the seams of a room corner and meet at one white-hot emitter, with lime haze pooling from the junction behind the hero and a statement and pricing section carrying the same seam language.
CSS Alpha Masking
sectionApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.
Example: Halden Glasshouse, a fictional Victorian botanical conservatory: one linear-gradient alpha mask (mask-image + -webkit-mask-image) softens a large canopy surface, a humidity metric card and a scrolling zone picker, with a live inspector for fade depth, direction and strength, then a mist-faded specimen register and an edge-faded garden walk.
Border Gradients
sectionApply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Example: Halation, a fictional Lisbon short-film week: a projector-lit hero whose opening-night glass card carries a 2px masked gradient edge, then a light-paper pass picker, a programme with gradient active tab and hover-revealed row edges, and a newsletter field that frames on focus.
Dark Blue Contrasting Clean
websiteCreate a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.
Example: Ohmie, a fictional snap-together robotics kit for kids aged 8–14: a near-black navy site held in a border-x framed shell with corner squares, whose cobalt gradient hero card shows a line-drawn robot you can switch between Explore, Follow line and Sleep, followed by spec strip, Frame/Rhythm/Signal kit cards, a six-week mission index and a cobalt pre-order band.
Dark Glass Clean Layout
websiteCreate a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.
Example: Fenwright Bindery: a hand bookbinding atelier in Leith presented as a dark-glass bench console — pill nav, left bindery shell, a calm centre stage with a sewn-signature diagram and floating cards, a right press-log shell, then protocol, materials ledger and a commission estimator in the same frosted language.
Dither Background
sectionCreate a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.
Example: Orca Massif Rescue: a volunteer mountain rescue team's site set over a fixed 4×4 Bayer-dithered field where a monochrome massif sits under drifting cloud masses, with a live callout board and Clear / Spindrift / Whiteout conditions that ease the cloud density.
Dither Laser Dark Mode
websiteCreate a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.
Example: Quell, a fictional trapped-ion quantum lab in Ghent: a 1 px white-hot 729 nm laser crosses a Bayer-dithered near-black field and addresses a chain of 32 calcium ions, and the same dark-glass panels, corner markers, gradient hairlines and red accent carry a telemetry card, a live trap console with tabs, a four-pulse circuit timeline and beam-time pricing.
Documentary Brutalist Agency
websiteCreate or redesign creative agency, production studio, architecture, culture, and portfolio websites with billboard typography, hard black-and-white chapters, exposed grids, documentary imagery, irregular collages, restrained parallax, brutalist navigation, and accessible FAQ controls.
Example: OFFCUT®, a fictional Rotterdam skate brand and film unit that documents spots before the city pours over them: billboard Anton headline over three B&W documentary frames, black spot-file chapters, a warm-white position cut, a seven-step narrative collage, pale mint/pink proof cards, updates, a hard-ruled FAQ and an oversized footer wordmark.
Editorial Portfolio Chapters
websiteCreate or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Use for dark editorial shells, full-bleed campaign media, color-coded case-study chapters, oversized service typography, restrained project reveals, and a decisive contact finale.
Example: Socalco, a fictional wine cooperative of sixty-three terrace growers: a near-black frame around an abstract terraced-hillside campaign hero, four vintages told as colour-fielded magazine-cover chapters, the cooperative's story only after the wine, oversized service disclosures, and a vermilion harvest-booking finale.
Editorial Service Booking
websiteCreate or redesign appointment-based service websites for salons, barbers, spas, wellness studios, clinics, and hospitality brands. Use for warm editorial layouts, serif-led identity, documentary portrait crops, calm treatment selectors, location-aware booking, and operational states that remain elegant and trustworthy.
Example: Calder Street Library, a fictional town library reopened after a two-year redesign, presented as a quiet ivory lookbook: a documentary hero, a tabbed service stage (desk, archivist, family history, reading advice), a slow confidence line, layered redesign photographs, a near-black ledger chapter, two branches with hours and access, and a booking flow that keeps service, library, librarian and time in view through to confirmation.
Editorial Tech
websiteBlend editorial magazine composition with precision product-tech detailing using asymmetrical grids, cinematic media bands, mono utility labels, and restrained accent color.
Example: Skerry, a fictional drone post for the eight islands of the Varrø archipelago: a cool-paper editorial spread with an oversized grotesk headline, a panoramic coast band crossed by a live flight path, a telemetry rail overlapping it, an interactive corridor map, a scroll-tracked flight timeline and a mono spec sheet — one international-orange accent throughout.
Falling Leaves
sectionBuild falling leaves that read as leaves, with each one tumbling on its own axis so it presents a face, thins to an edge, and opens out again, and with its sideways slip driven by that same tumble. Covers the 2-D canvas build and the instanced-3-D variant, where leaves are recycled from, density-versus-count maths, depth layering, colour under a tone-mapped composite, reduced motion, and visibility pausing. Use for autumn maple, sakura petals, blossom, ash, snowfall shapes, or any drifting foliage where a generic particle field reads as confetti.
Example: Ossiet Archive reopens “Chute”, a fictional 1974 couture collection of forty-one double-faced coats: a bone-paper hero where a procedural maple fall in oxblood, vermilion and dry amber tumbles edge-on behind and in front of a condensed Archivo headline, with live Leaves / Wind / Tumble / Gust controls and an accession-card catalogue below.
Fire-Paper Loader
sectionBuild a burning-paper ring loader whose GLSL flame is drawn by a Worker on an OffscreenCanvas started from the head, so a main thread blocked by the page build cannot freeze it, with a progress count, an even-paced run into the hand-off, and a clean fade to the page. Covers the ember thread and ember gradient, porous char, worker start-up, parallel shader compile with a waited 1-px warm-up draw, hand-off without a stall, reduced motion and hidden-tab behaviour. Use for a loading screen, preloader, page loader, splash, "kindling", burn loader, ember ring, burning paper hole, fire loader, or a loader that must keep moving while heavy JavaScript, three.js or shader builds hold the main thread.
Example: Coldwater Trust, a fictional marine-heatwave NGO: a burning-paper ring drawn by a head-started Web Worker keeps opening while the page blocks its own thread, then hands its rim to the hero, which keeps the burnt hole as a porthole onto the reef.
Framed Grid Layout
websiteCreate minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial, technical, or guide-border web layouts.
Example: Kerf Studio, a fictional nine-person strategy-game studio in Ghent: every section sits in a 1px framed box with 18px L-shaped corner brackets on one 12-column parent grid over a faint 135° hatch, and the hero's live Tidewright board — a tide flooding a 16×16 archipelago while a red cursor plots a dyke ring — speaks the same square-grid language.
Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.
Example: Coldframe, a fictional Norwegian warm-water liquid-cooling operator that sells data-centre heat to the town: a near-black site built from railed shells with overshooting guides and corner squares, an asymmetric hero grid (headline, live thermal-field canvas, hall selector, PUE card) and one-pixel white-to-transparent gradient edges on every premium surface.
Funky Purple Container Tech
websiteCreate a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.
Example: Ushimitsu, a fourteen-seat late-night ramen counter under the U1 in Kreuzberg, housed in a railed and corner-marked dark shell with a glowing fuchsia egg-orb, a rotating text ring, a gradient-edged seat bar and floating pot card.
Glass Dark Mode Clock
websiteCreate a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Example: Rook & Ledger: a furniture workshop that seasons every board one year per inch, told through a frosted-black calibration dial that tracks a walnut stack while its hands keep live workshop time, with glass ledger dials, a tick-ruler process and a thickness-to-delivery commission dial.
Glass Dark UI
websiteBuild dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.
Example: Apsis Orbital, a fictional four-guest space-tourism operator: frosted navy glass panels with the skill's masked 1px blue-violet gradient edge on every surface, from a launch-console hero over an Earth-limb photo to itinerary cards, a family flight-deck dashboard, a training timeline and a native <dialog> booking modal.
Globe.GL
sectionUse when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
Example: Ninth Needle: a Kreuzberg tattoo collective's guest-spot atlas, where a globe.gl sphere of dotted land carries coral arcs from Berlin to eight tour stops; picking a stop flies the globe to it, rings the city and updates the artist card.
Globe Particles
sectionCreate a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not generic starfields or full page layout changes.
Example: Sotavento, a commons of 4,112 backyard weather stations: a Three.js particle globe whose white-hot core is the ground network and whose tilted radar-green ring is the week's balloon soundings, set in a Geist/Geist Mono instrument-panel hero with isobar contours.
Gooey Blob System
sectionCreate a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.
Example: Coalesce, a fictional open-source local-first sync engine: six device replicas orbit one shared document as a single SVG-goo mass — drifting off (and queueing ops) when offline, fusing back when they meet — with the pointer joining as a seventh peer, plus mini goo demos for merge, sync and fork and a gooey CTA.
GSAP
websiteUse when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
Example: Lull, a fictional seven-day dusk yoga retreat on São Jorge: a framed violet hero whose five practice cards fan in on one GSAP timeline and can be thrown around with Draggable + Inertia (velocity tilt, float loops, a keyboard 'Shuffle the week' re-fan), then a looping 4·4·6 breath-clock timeline, a pinned ScrollTrigger scrub through the seven days, SplitText line reveals, batched reveals, counters and a quickTo magnetic CTA.
Build cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.
Example: Lowlathe Pressworks, a fictional Ghent vinyl plant: one pinned, scrubbed story follows order A-2219 from lacquer cut through nickel stamper, PVC biscuit, 150-tonne press, flash trim and test listen, with a live Pressline panel counting each state, then hands off to formats, plant stats and a clip-path booking reveal.
Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.
Example: Open Core: the public console for Vessmark's car-free old town — a molded black instrument shell on a pale page, with a live loop map, air and tram instruments, resident requests, the four-step charter and a street search.
Horizontal Scroll Scenes
sectionBuild scene-by-scene chapters that advance left to right on one fixed stage while the user scrolls vertically, with native scroll as the only input. One pure function turns scrollY into scene, dwell and move, so forward, reverse, scrollbar drags, fast skips and reload at depth all land on the right frame. Covers dwell versus transition budgets, a burn-wipe or pan between scenes, chapter index and progress UI, glide-to-scene links that skip intermediate scenes, keyboard and reduced-motion behaviour. Use for horizontal scrollytelling, multi-scene product tours, "scroll down to travel sideways", chapter carousels driven by the wheel, or any piece where a wheel-jacked slider keeps breaking on touch, keys, refresh or back.
Example: En Passant, a chess club in an old tram depot: one Thursday evening as five rooms laid left to right on a fixed stage (Opening, Blitz, Lesson, Gambit, Mate), driven only by native vertical scroll. Between rooms, a checkered clock-wipe line writes the next chapter in while the board, clock and endgame pieces play out over each dwell.
Image First Grid Layout
websiteCreate an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.
Example: Brinehall, a fictional public aquarium on Pier 9: four full-bleed underwater stages (eagle ray, reef, sunlit water, looking up from the reef) carry the whole site, with a five-rail container grid, square crossing markers, bottom-anchored headlines and low-fill glass boxes for a live tank readout, hall depth gauges, husbandry figures and a timed-entry picker.
Landing Page
websiteUse when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
Example: A single-offer landing page for Mise, a fictional plate-costing tool for independent restaurants: one primary CTA (30-day free trial), a hero where a fish invoice arrives and re-costs a dish live, then problem → benefits → how it works → case study → FAQ → risk-reversal final CTA.
Light Mode Paper Technical
websiteCreate a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.
Example: Sunfold, a fictional community solar co-operative: a warm parchment shell framed in a dark field, with a live roof-yield console, share-certificate and bill mockups, a published roof register, AGM minutes with motion votes and an open share offer, all drawn with L-brackets, dimension lines, diagonal hatching and a single vermilion signal.
Liquid Metal Border
sectionAdd and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.
Example: Anneal, a fictional incident-response firm, whose graphite hero puts metal-fx liquid-metal rings only where state lives: the 'Report an active incident' CTA (reflecting onto its ghost neighbour), a live engagement console framed in a slow chromatic hairline, its selected response-phase tab, and the checked retainer plan below.
Marquee Loop
sectionApply seamless infinite marquee loops using duplicated items.
Example: Nocturne, a fictional European sleeper-train operator: a framed night-palette hero stacking three seamless CSS loops — a departures ticker, fixed-width route cards that pause on hover/focus, and reversed passenger notes — over a still, readable timetable.
Masked Reveal
sectionCreate masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
Example: Highline, a three-day kite festival on Fenwick Sands: a dawn-sky hero of hand-drawn SVG kites where every headline rises word by word through an invisible mask, carried through the programme, makers and getting-there sections.
Matter.js
sectionUse when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.
Example: Silt & Sorrel's Sorrel No. 3 cleansing balm told as its own formula: fourteen ingredients, each a Matter.js body sized by its weight share (oils as circles, butters and clay as blocks, beeswax as a hexagon, extracts as capsules), drop into a bounded tray, settle, and can be picked up to read what they do.
Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure, and infrastructural or planetary depth.
Example: Smalt Hot Shop: a cobalt-glass blowing studio in Ghent, where a drifting cobalt/indigo/steel mesh field powers the hero shell, framed process stations, a live annealing-curve log and the booking finale.
Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.
Example: Kessa Ridge Volcano Observatory: a warm off-white editorial shell with rails and corner squares that houses dark rounded blocks — a topographic hero with a live seismogram card, an instrument network, field-night and research-feed plans, a plain-words bulletin log and a 24 h duty-line CTA.
Nested Container Frames
websiteCreate a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.
Example: Lugwork, a fictional two-person steel bicycle frame workshop in Ghent: a 1320 px outer frame with full-height hairlines and square corner markers at every band seam, level-2 panels inset by one shared gap (blue hero with a coral pinwheel bloom, paper process panel, white model frames, cobalt proof, blue CTA), and level-3 modules inset again — a live build sheet with tabbed geometry drawings and a fitting-slot form.
Number Details
sectionAdd decorative 01, 02, 03 numeric detail markers.
Example: Static House, a fictional slow-audio podcast network on warm paper, where one quiet two-digit mono marker style (01, 02, 03) sits in the same places throughout: a ruled section gutter, the corners of the show cards, a process timeline rail and beside each episode title.
Operational Enterprise AI
websiteCreate or redesign enterprise AI, automation, security, and operations product pages that explain system boundaries, approvals, auditability, exceptions, and rollback. Use for dark cinematic heroes, hairline grids, metric pauses, expandable solution rows, case-study evidence, security proof, and qualified demo or waitlist handoffs.
Example: Corps, a fictional rehearsal-operations system for ballet companies: a near-black hairline-grid hero that states the boundary (it drafts the cast change, the ballet master releases it) beside a sample workflow trace with an approval gate and a dancer-hours load chart, then warm-white chapters for scoped metrics and expandable workflow rows (summary, permissions, action, approval, output, audit, exception, rollback), a deterministic product console with ten run states and role-based approval, a risk-to-control table, fact/quote/interpretation case studies with filters, a buyer FAQ and a qualified review form.
Orange Clean Paper SaaS
websiteCreate a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.
Example: Firecrest, a forest fire watch platform: a warm paper split onboarding card (stepped form beside a live topo map where tower bearings cross over a plume under floating glass cards), then a bento of pillars, a minute-by-minute plume timeline, per-tower plans and a CTA.
Paper Cinder Transition
sectionChange between pages, chapters or scenes with a paper-burn transition, a ragged ember line that sweeps across the frame, chars the old page ahead of it and reveals the next scene live behind it, written as one WebGL composite pass over a frozen frame and a scissored live scene. Covers the front's silhouette, the luminous ember gradient with a beading gold thread, torn porous charcoal that is alpha-masked, baked noise, finite-difference slopes, the 0.75-scale live scene, sweep direction, timing, reduced motion and visibility pausing. Use for a burn transition, paper burn, cinder wipe, chapter change by fire, charring page reveal, burn-away section change, ember dissolve, or when a fade, slide or generic dissolve between scenes reads as cheap.
Example: Last Credit, a fictional arcade bar on Pier 4: its ticket wall, cabinet row and blacklit cosmic-carpet back room burn into each other along a ragged ember line, the next room live behind it and the one you leave frozen and scorching ahead of it.
Pointer Trail Emitter
sectionBuild a cursor trail whose spacing stays constant at any hand speed, by emitting motes per unit of distance travelled rather than on a timer, so a flick draws the same continuous ribbon as a crawl instead of breaking into scattered dots. Covers sub-segment placement, the ring-buffer ordering trap, the idle breath a distance emitter needs, anchoring the trail to the screen in a 3-D scene, scaling scatter against the plane it hangs on, coasting instead of stopping dead, touch and reduced-motion fallbacks, and why moving the emitter to a DOM overlay to raise its z-index costs more than it buys. Use for cursor wisps, pointer sparks, embers, magic trails, comet tails, plankton, dust, or any mote trail that must stay legible however fast the hand moves.
Example: Kittiwake Sound Ferries, a fictional island operator, plots its crossing on a pale sea-glass chart: the pointer is a signal-yellow ferry and its wake is a Canvas 2D mote trail emitted by distance travelled, so an autopiloted slow outbound leg and fast return lay the same spacing — with a live mote-count log, emission/spacing/scatter/coast controls and a timetable below.
Pricing Page
websiteUse when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
Example: Lowmoss Mushroom Farm: a weekly harvest-share pricing page grown in a railway tunnel, with a monthly/yearly toggle, three plans (Spore, Flush recommended on a lilac tint, Cellar) priced by one value metric — fresh kilos a week — then member proof, a grouped comparison, a plain Q/A FAQ with FAQPage schema and a wholesale last mile.
Product Proof SaaS
websiteCreate or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof. Use for pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules, honest pricing comparisons, and FAQ handoffs.
Example: Escapement, a fictional service desk for typewriter repair benches, whose hero is a working deterministic demo: a customer's note about a skipping Olympia SM3 becomes a labelled sample work order that you can edit, approve and 'send' through six explicit states.
Progressive Blur
sectionCreate a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.
Example: Brightwell Fusion: a compact-tokamak startup's power-offtake page where programme cards with glowing plasma tori slide under fixed top and bottom progressive-blur edges built from the skill's eight stepped backdrop-filter layers.
Reveal Hover Effect
sectionBuild cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an eased pointer.
Example: Saltgrain Shaping Bay, a fictional Ericeira surfboard shaper: a 260px eased spotlight follows the cursor across the bench and turns full-scale pencil templates into the same boards glassed, pinlined and waxed, with compact 170px reveals on each card of the autumn quiver.
Scroll Progress Timeline
sectionTurn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion behavior. Use for onboarding, checkout, roadmaps, recipes, case studies, service processes, histories, or narratives where progress through the sequence should become visible while scrolling.
Example: Nightjar Films' production diary for The Salt Year, a fictional 16mm indie feature: six stages from script to a 38-cinema release on one red left rail that fills from the first dot to the last as you scroll, with a sticky readout (current stage, film timecode, sprocket reel bar) and chapter anchors marked aria-current.
Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling.
Example: Throwline, a studio-pottery marketplace where every listing carries its making: one sticky chapter throws a stoneware jar from a wedged lump through centring, opening, pulling, kiln firing and a celadon glaze dip, with every frame set by native scroll in both directions.
Scroll-Scrubbed Word Reveal
sectionReveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability. Use for headlines, quotes, manifestos, product statements, onboarding messages, or editorial passages where scrolling should pace comprehension rather than simulate typing.
Example: Northcorrie Avalanche Bulletin, a fictional mountain forecasting office: today's danger headline sits on a pinned snow-white stage and sharpens word by word with native scroll (opacity, blur and lift from one normalized progress), with a live percent-read counter and danger badge, then an in-flow passage on buried surface hoar using the same reversible mapping and a snowpack profile below.
Scroll World Storytelling
websiteTurn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.
Example: Vael Chocolate Works, Batch 14: sixty-one days in the life of a bar told as a thermal ledger, where native scroll walks seven beats (open, ferment, roast, conche, temper, rest, release) and draws one cobalt temperature line through nine stages beside a live °C counter.
Shaders Cursor Ripples
sectionAdd cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components. Use when a hero, gallery, or media panel needs a water-ripple mouse effect; when replacing a drifting CSS spotlight or flashlight reveal; or when a prompt says to borrow only the shader interaction from a Shaders.com reference while preserving the current brand, image, copy, and layout.
Example: Calma Boatworks, a fictional South Tyrol yard building silent electric launches for alpine lakes: a full-bleed lake hero where the Shaders CursorRipples pass (ImageTexture → CursorRipples, decay 7.3, radius 0.6, ACES) turns the cursor into a boat's wake on the water, followed by stats, the three-hull fleet, the build process and 2027 build slots.
Skeuomorphic UI
websiteCreate skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.
Example: Kerbside Sketch School: a Lisbon urban-sketching school whose hero is a soft-plastic field kit — nib selector, time slider, wash switch and an enamel Draw button — that sketches a street corner stroke by stroke, with the same raised/pressed surfaces carried through course cards, walk list and sign-up.
Solar Duotone Bold
websiteUse Iconify Solar Duotone Bold icon style.
Example: Strewnfield, a fictional dealer in certified meteorites: a periwinkle-to-cobalt hero with a giant Solar Duotone Bold star-fall glyph and labelled provenance chips, then a filterable specimen cabinet, a six-checkpoint provenance trail, a guarantee grid and a field-key legend — every icon one Solar Duotone Bold glyph whose secondary layer is recoloured ember or kept at its native 50 % opacity.
Split Layout Technical
websiteCreate a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.
Example: Undercroft, a fictional hydroponic restaurant nine metres below Antwerp: every band is a two-panel split of framed display surfaces (inset rules, 5 px corner squares, mono rails) with an explanatory paper half beside an immersive dark half: a live canvas render of a lit grow rack in the hero, a sticky rack map against the harvest list, a germination photo against the grow-room spec sheet, and a booking form against the address panel.
Staggered Word Reveal
sectionCreate subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.
Example: Isobath, a two-person cartographic studio in Port Varra: a contour-lined hero where the headline rises word by word, beside a 'how a sheet is made' panel that plays a four-step sequence — soundings, contours, names, print — with a Replay control, carried through method, quote, plan-chest and commission sections.
Tailwind CSS
websiteUse when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.
Example: Halvard Drum Works, a fictional steam-bent snare workshop in Bergen: a stone-and-sky utility-first site whose hero is a live snare build — pick a wood and a depth and the SVG drum and its Shell / Edge / Tone spec cards update — followed by the bench process, this season's models, a numbers band and a visit form.
Tech Green Dark Mode Modern
websiteCreate a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.
Example: Saltmark Light Trust, a fictional charity that keeps fourteen automated lighthouses burning on an invented coast: a matte-black operations site whose hero is a bracketed coast-chart console where every light flashes its real nautical character (Fl(2) W 10s, Oc W 8s…), with an emerald range ring and a flash-pattern strip for the selected station, followed by a stats rail, Lamp / Fog signal / Power station modules, a hours-of-darkness chart beside the night log, and keeper membership tiers.
Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.
Example: Skerryworks, a fjord-side kayak outfitter, publishes its Fulmar 17 expedition sea kayak as a monochrome diagnostic teardown: a Three.js wireframe hull exploded into five layers with routed connector tags, mass-allocation and bench-log readouts, then a layer schedule, a cockpit fit cross-section and a fleet of plan-view drawings.
Thinking Orbs
sectionAdd accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generation, or tool-running interface needs a semantic working, searching, solving, listening, composing, or shaping state; when replacing a generic spinner with an AI activity orb; or when implementing the library's size, theme, speed, pause, reduced-motion, and canvas behavior.
Example: Halyard, a passage-planning assistant for small-boat sailors, whose live planning console maps each real phase (voice brief, tide lookup, window planning, route drawing, brief writing) to one of the six thinking-orb states, with a light chartroom view that shows theme="auto" flipping the ink.
Three.js
sectionUse when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.
Example: Kurahashi Shuzō, a fictional Ina-valley sake brewery: its hinoki masu rendered live in three.js as a lit cedar solid with green-traced edges and vertex nodes, rotating on a stable Y axis inside a measurement frame while a Pour control raises the sake to the burned 180 ml gō line.
Three.js Landscape
sectionBuild a live Three.js landscape that stays quiet behind a subject — a noise heightfield on a polar grid so resolution follows the lens, ground coloured by slope and moisture rather than by texture, instanced GPU grass whose wind costs nothing on the CPU, scattered stones, a gradient sky dome, a star field you can actually see, and a time-of-day system that cross-fades instead of cutting. Use for hero backdrops, product stages, scroll worlds, or any scene where a building, object, or figure has to sit in a place rather than float on a gradient.
Example: Fallow, an AI research lab on Halden Moor: its hero stands the station's weather mast and barn in a live procedural moor — polar heightfield, instanced grass, six-stop sky — with dawn, noon, dusk and night that cross-fade.
Three.js Towers
sectionGenerate architecture procedurally in Three.js and film it assembling — a small geometry vocabulary that builds pagodas, castles, domes and spires from parameters instead of mesh files, hip roofs with flying eaves driven by a single profile function, and a clipping-plane build animation where everything below a rising line is finished work and scaffolding stands above it. Use for construction studies, architectural title sequences, procedural landmarks, or any hero object that should build itself rather than fade in.
Example: Ardra Lights: three procedural lighthouses (a curved granite rock tower, a banded cast-iron octagon, a harbour light with keeper's cottage) built from one kit of parts, each assembling behind a rising clip plane with cut caps, scaffolding a lift ahead, staged captions, and a lantern that lights on completion.
Three.js Weather
sectionPut weather into a Three.js scene that reads as weather — rain anchored inside the frustum, a storm that is the rain leaned on rather than a second system, lightning on its own light with thunder scheduled by distance, snow that blows up into blizzards and keeps settling until the ground goes white, wet ground with puddles and splashes, and looping ambience that has no seam. Use for scene atmosphere, seasonal states, hero backdrops, or any world where clear/rain/storm/snow needs to be a control the viewer can turn.
Example: Tarn Ridge, a fictional roof-mounted weather sensor for the smart home: a live Three.js field around a black timber house with the sensor on its ridge, where one control switches clear, rain, storm and snow while Ridge's telemetry and the actions it sends the house (skylight, shutters, gutter heat) change with the sky.
Unicorn Studio
sectionUse when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).
Example: Tel Varesh Survey, a fictional excavation: a full-bleed radar section of eighteen soil horizons with a sweeping GPR beam lighting hyperbolic returns over buried finds, embedded the Unicorn Studio way and followed by a live field-budget panel for the SDK's scale, DPI and FPS knobs.
Vanta.js
sectionUse when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).
Example: Volta, a night school for aerial circus arts in a Porto tram depot: a full-bleed Vanta WAVES field tuned to read as hanging crimson silk sits behind the hero, and the rig console's apparatus picker (silks, trapeze, lyra, low wire) retunes it live through setOptions.
WebGL 3D Object
sectionCreate a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.
Example: Neap, a tide-prediction app: a faceted, cratered icosahedron moon in matte ceramic PBR floats over a vermilion brutalist hero, and its sun light swings with a moon-age slider that redraws the harbour's 24-hour tide curve.
WebGL Landing Steering
websiteUse when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.
Example: Halden Nib Works' reservation page for the Meridian 18 fountain pen, steered into Lane A: eighteen slow ink bands and a travelling nib beam drawn by one fragment shader on warm paper, with a live ink switcher, and a steering section that shows the rejected lanes, visual spec, stack, fallback and quality gates read live from the page.
WebGL Laser
sectionCreate a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.
Example: Darkroom Orchids, a windowless orchid nursery in Ghent: one thin white-hot grow-light blade with orchid-magenta halo and smoke stands behind the page and glides to a new position for each section so it never crosses the copy.
No skills match.