Components for websites

Navigation, heroes, sections, buttons, footers and living materials, each on a page of its own. Every one runs by itself: a pointer walks through it until you move the mouse or touch the screen, and then you take over.

300 components

Heroes

12

Takeover01A running week planner with an autopilot pointer, in HTML, CSS and SVG Kinetic type02Canvas 2D, with the letters used as a mask Backwards from race day03Bars built in HTML and CSS from one date Assembly04Scroll position sets the place, rotation, opacity and blur of every piece Time of day05The local clock sets the sky, the time and the session Split06Canvas 2D under a clip path that follows the pointer Zero-JS cinema07CSS scroll-driven animations, @property, offset-path and a linear() spring Paint worklet terrain08CSS Paint API, with a canvas fallback Liquid glassDark in both themes09Canvas 2D and an SVG displacement filter Raymarched mountainsDark in both themes10WebGL2 fragment shader without libraries, with a 2D fallback View transitions11View Transitions API with a linear() spring Hero with a statement and the app12Layout known from anthropic.com, word reveal from linear.app

Sections

19

Connected system01One load model behind a week list and two SVG charts Living board02Pointer drag between the columns of a week Scroll season03A sticky stage driven by scroll position Two seasons04Two SVG curves and a clip path with a handle Readings05A list that sets one large number Lens06A round clip path that follows the pointer Split-flap board07CSS 3D flaps, one character at a time Self-writing session08Typed text that sets off a timeline of bars Deck09Pointer drag with the speed of the throw Ride the section10Canvas 2D trail drawn from pointer speed Exploded stack11CSS 3D layers and a range slider Section header12Known from claude.com Manifest13Known from The Linear Method Feature grid with a science panel14Known from linear.app Tabs with a scene15Known from claude.com Interactive product illustration16Known from linear.app Folding list with a chart17Known from linear.app Chart with a data table18Crosshair known from linear.app Margin notes19Known from claude.com

Calls to action

10

Closing call to action01A scaled circle in CSS, with its start set from the pointer Live counter call to action02Rolling digits in CSS and an SVG line redrawn on a timer Terminal call to actionDark in both themes03A typed script on timers, and the Clipboard API Headline as the button04CSS transitions with a delay per letter Spotlight on a dark sectionDark in both themes05Radial and conic gradients driven by custom properties Claim beside its proof06SVG paths computed in the script, moved with requestAnimationFrame Email capture with states07A form with CSS states and a drawn check mark Two doors08CSS flex transitions, no script Marquee closer09A CSS keyframe animation on a doubled track Dark section with one headingDark in both themes10Known from claude.com and anthropic.com

Buttons

14

Circle fill01The circle fill known from 21tsi, in CSS with two custom properties Magnetic button with elastic return02Linear interpolation toward the pointer, and a spring for the way home Character roll03CSS transitions with a delay per character Gel press04A spring integrator on scale, and a radial highlight Liquid fill05An SVG path redrawn on every frame State morph06Known from Family: one container for the label, the spinner and the confirmation Hold to confirm07A conic gradient ring filled from a custom property Trust delay08After Kowalski: a short wait can give more trust than an instant answer Directional fill09A CSS translate, with the edge worked out from the pointer Border trace10An SVG rectangle drawn with stroke-dashoffset Proximity spotlight11Conic and radial gradients driven by the distance to the pointer Blend difference12mix-blend-mode: difference Button with live data13Rolling digits in CSS with tabular figures Buttons and links14Variants known from linear.app, split button from anthropic.com

Footers

28

The footer behind the page01Common on award-winning sites Giant wordmark02Common on product and studio sites The dense footer that folds away03Known from apple.com Language and currency04Known from Airbnb Theme and status05Known from Vercel’s footer A newsletter that answers back06Common on product sites Stickers with physics07Common on award-winning sites A big call to action and the way home08Common on agency sites The endless page09Seen on award-winning sites Falling letters and pills10Common on award-winning sites, here with Matter.js A wordmark of particles11A classic on award-winning sites The cloth12Seen on award-winning sites The harp13Seen on award-winning sites A liquid wordmark14Common on award-winning sites The globe of offices15Known from GitHub’s home page, here as a footer Wordmark that fills as you read16An SVG clip path moved by the scroll position Navigation that falls to the floor17A small physics loop written for it, no library Ledger of claims18Rows built from a list in the script, shown by an IntersectionObserver Terminal footer19A text field and three commands Horizon with the time of day20Sky colors interpolated from the local time, updated every second Signature and colophon21SVG stroke-dashoffset, started by an IntersectionObserver Receipt of the visit22Counters kept in the page, and a barcode made from their values Curtain reveal23CSS scroll-driven animations on a shared view timeline, no script Sitemap as a star map24A 2D canvas for the sky, with the links placed over it Letter that unfolds25CSS 3D rotation with a delay per panel Anchored popovers26The Popover API and CSS anchor positioning, with a measured fallback Minimap of the page27Cloned sections, scaled down in CSS Dark footerDark in both themes28Known from anthropic.com

Content

6

News list with search01Known from anthropic.com Newsroom02Known from anthropic.com Research front page03Known from anthropic.com Catalog with filters04Known from claude.com and linear.app Quotes and numbers05Known from claude.com Logo strip06Known from linear.app

Conversion

4

Pricing table01Known from linear.app and claude.com Comparison table02Known from claude.com FAQ03Details elements with a shared name Form fields04Fields, choices and errors

Overlays

3

Command menu01Known from linear.app Side panel02Known from linear.app Messages03A news message and a cookie choice

Illustration

3

Drawing language01Isometry known from linear.app, stop motion from claude.com Curve drawn by scrolling02Charts known from linear.app, reveal from claude.com Drawn animation03Known from claude.com

Living materials

8

ClothDark in both themes01Linen, silk, denim and velvet, simulated thread by thread FluidDark in both themes02A fluid solver on the graphics card Water03A pool seen from above, with caustics The lamp04A lamp on a cord with a pull switch ChromeDark in both themes05Spheres of liquid metal ParticlesDark in both themes06Particles in a flow, computed on the graphics card Grass07A meadow where every blade bends SandDark in both themes08A wordmark of sand that crumbles

Controls

10

Button01From the Engineering page on ramtt.com Icon button02From the Engineering page on ramtt.com Segmented control03From the Engineering page on ramtt.com Switch04From the Engineering page on ramtt.com Checkbox05From the Engineering page on ramtt.com Slider06From the Engineering page on ramtt.com Select07From the Engineering page on ramtt.com Text field08From the Engineering page on ramtt.com Keycap09From the Engineering page on ramtt.com Field that scrubs10From the Engineering page on ramtt.com

Display

8

Badge01From the Engineering page on ramtt.com Inline label02From the Engineering page on ramtt.com Avatar03From the Engineering page on ramtt.com Progress04From the Engineering page on ramtt.com Tooltip05From the Engineering page on ramtt.com Skeleton06From the Engineering page on ramtt.com Card07From the Engineering page on ramtt.com Empty state08From the Engineering page on ramtt.com

Menus and search

6

Options menu01From the Engineering page on ramtt.com Fold-out menu02From the Engineering page on ramtt.com Dock03From the Engineering page on ramtt.com Command menu04From the Engineering page on ramtt.com Find bar05From the Engineering page on ramtt.com Filter menu06From the Engineering page on ramtt.com

Motion

9

Lag01From the Engineering page on ramtt.com Stagger02From the Engineering page on ramtt.com Decisive threshold03From the Engineering page on ramtt.com Enter and exit04From the Engineering page on ramtt.com Underline wipe05From the Engineering page on ramtt.com Typewriter06From the Engineering page on ramtt.com States that snap07From the Engineering page on ramtt.com Travelling focus08From the Engineering page on ramtt.com Yielding work09From the Engineering page on ramtt.com

Surfaces

9

Sheet01From the Engineering page on ramtt.com Widget board02From the Engineering page on ramtt.com Anchored list03From the Engineering page on ramtt.com Carousel04From the Engineering page on ramtt.com Masonry05From the Engineering page on ramtt.com Ticker06From the Engineering page on ramtt.com Scroll header07From the Engineering page on ramtt.com Infinite field08From the Engineering page on ramtt.com Contour field09From the Engineering page on ramtt.com

Writing

4

Vanish field01From the Engineering page on ramtt.com Resting notes02From the Engineering page on ramtt.com Relative time03From the Engineering page on ramtt.com Ink04From the Engineering page on ramtt.com

Tokens

6

Colour roles01From the Engineering page on ramtt.com Ramp02From the Engineering page on ramtt.com Type scale03From the Engineering page on ramtt.com Elevation04From the Engineering page on ramtt.com Radius05From the Engineering page on ramtt.com OKLCH gamut06From the Engineering page on ramtt.com

Platform

8

Anchored popover01From the Engineering page on ramtt.com Customizable select02From the Engineering page on ramtt.com Carousel with markers03From the Engineering page on ramtt.com Continuous corners04From the Engineering page on ramtt.com Optical centring05From the Engineering page on ramtt.com Disclosure06From the Engineering page on ramtt.com Stuck header07From the Engineering page on ramtt.com Week ring08From the Engineering page on ramtt.com

Product

6

W′ balance01From the Engineering page on ramtt.com Training week02From the Engineering page on ramtt.com Fueling03From the Engineering page on ramtt.com Physiology04From the Engineering page on ramtt.com Power curve05From the Engineering page on ramtt.com Rehearse06From the Engineering page on ramtt.com