Components

627

Components for websites, each on a page of its own and each running by itself: a pointer walks through it until you move the mouse or touch the screen, and then you take over.

Components
627
Shelves
12
Groups
59
Built with
HTML, CSS, JavaScript and WebGL
01

Tau, the studio site

149

The studio site and every part of it: heroes, selected work, case pages, the menu, page changes, footers, contact, and the mechanics the parts are built from. Each keeps Tau's own design.

Heroes

10
The table01Heroes The stack02Heroes The words03Heroes The window04Heroes The grid05Heroes The frame06Heroes The hand07Heroes The column08Heroes The layers09Heroes The reel10Heroes

Selected work

12
Strips01Selected work Mosaic02Selected work Rows03Selected work Chapters04Selected work Cards05Selected work Map table06Selected work Card file07Selected work Leaflets08Selected work Corridor09Selected work Day and night10Selected work Halftone11Selected work Camera12Selected work

The person behind

6
Fields01The person behind Letter02The person behind Card03The person behind Conversation04The person behind Data sheet05The person behind Principles06The person behind

Footers

6
Wordmark01Footers Letter02Footers Cord03Footers Table04Footers Index05Footers Colophon06Footers

Page transitions

6
Curtain01Page transitions Morph02Page transitions Sheet03Page transitions Blinds04Page transitions Overview05Page transitions Name06Page transitions

Case pages

6
Rail01Case pages Film02Case pages Across03Case pages Magazine04Case pages Light table05Case pages Register06Case pages

Contact

6
Conversation01Contact Brief02Contact One field03Contact Letter04Contact Kit05Contact Steps06Contact

Not found

6
Gap01Not found Letters02Not found Plan03Not found Lost and found04Not found Torch05Not found Register06Not found

About

6
X-ray01About Dividing line02About Manuscript03About Full stop04About Pinboard05About Two vocabularies06About

What the studio makes

6
Columns01What the studio makes Dial02What the studio makes Sentence03What the studio makes Shelf04What the studio makes Mixer05What the studio makes Box06What the studio makes

Work in numbers

6
Counter01Work in numbers Tape measure02Work in numbers Dots03Work in numbers Receipt04Work in numbers Paragraph05Work in numbers Cards06Work in numbers

From the notes

6
Specimens01 Live numbers02 Notebook03 Display cases04 Row05 Index06

Menus

6
Pill01The menu Corners02The menu Contents03The menu Overview04The menu Address05The menu Dock06The menu

Lab pages

6
Bench01The Lab page Cabinet02The Lab page Reel03The Lab page Specimen sheet04The Lab page Search05The Lab page Periodic table06The Lab page

Archive rooms (WebGL 2)

6
Tunnel01The Archive in space, WebGL 2 without a library Depth02The Archive in space, WebGL 2 without a library Table03The Archive in space, WebGL 2 without a library Helix04The Archive in space, WebGL 2 without a library Sphere05The Archive in space, WebGL 2 without a library Stack06The Archive in space, WebGL 2 without a library

Work pages (View Transitions)

6
Grid01The Work page and a project page Index02The Work page and a project page Strip03The Work page and a project page Cases04The Work page and a project page Names05The Work page and a project page Light table06The Work page and a project page

Colophon

6
Book01The colophon Specimen sheet02The colophon Motion03The colophon Meter04The colophon Bill of materials05The colophon Exploded view06The colophon

Pointer

3
Loupe01Lab, Pointer Cursor label02Lab, Pointer Hover peek03Lab, Pointer

Collections

6
Infinite field01Lab, Collections Masonry02Lab, Collections Contact sheet03Lab, Collections Name wall04Lab, Collections Index with preview05Lab, Collections Slideshow06Lab, Collections

Surfaces

4
Sheet01Lab, Surfaces Morph view02Lab, Surfaces Glass panel03Lab, Surfaces Index overlay04Lab, Surfaces

Numbers and type

5
Odometer01Lab, Numbers and type Scrub timeline02Lab, Numbers and type Fit text03Lab, Numbers and type Colour field04Lab, Numbers and type Crop marks05Lab, Numbers and type

Controls

3
Theme switch01Lab, Controls Action row02Lab, Controls Text pager03Lab, Controls

Site parts

12
The bar and the footer01mounted from the site's own code Hero reel02mounted from the site's own code Selected work cards03mounted from the site's own code Lab marquee04mounted from the site's own code Closing band05mounted from the site's own code Work: grid, index and names06mounted from the site's own code Case page07mounted from the site's own code Services slider08mounted from the site's own code Services rows09mounted from the site's own code Archive field and gallery10mounted from the site's own code About11mounted from the site's own code Contact form12mounted from the site's own code
02

Navigation and menus

119

Bars, dropdowns, docks, command menus, side panels and messages.

Overlays

3
Command menu01 Side panel02 Messages03A news message and a cookie choice
03

Heroes and sections

37

The top of a page and the sections under it: heroes, scroll scenes, feature grids, lists and logo strips.

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 app12

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 header12 Manifest13 Feature grid with a science panel14 Tabs with a scene15 Interactive product illustration16 Folding list with a chart17 Chart with a data table18 Margin notes19

Content

6
News list with search01 Newsroom02 Research front page03 Catalog with filters04 Quotes and numbers05 Logo strip06
04

Buttons and calls to action

28

Buttons, the calls to action that close a page, pricing and comparison tables, questions and form fields.

Buttons

14
Circle fill01 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 morph06 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 links14

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 themes10

Conversion

4
Pricing table01 Comparison table02 FAQ03Details elements with a shared name Form fields04Fields, choices and errors
05

Footers

28

The end of a page.

Footers

28
The footer behind the page01 Giant wordmark02 The dense footer that folds away03 Language and currency04 Theme and status05 A newsletter that answers back06 Stickers with physicsDark in both themes07 A big call to action and the way home08 The endless page09 Falling letters and pills10 A wordmark of particles11 The cloth12 The harp13 A liquid wordmarkDark in both themes14 The globe of offices15 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 themes28
06

Editorial

33

RAMTT's articles and the parts they are made of, its editorial pages and marketing pages, and the drawn illustrations.

Article components

16
Type scale for articles01 Buttons and text links02 Tables of contents and progress line03 Reading column04 Blockquote and testimonial card05 Collapsible section and accordion06 Figure with caption and gallery07 Chart panel and view switcher08 Benchmark grid09 Featured grid10 Publication list11 News table with marquee12 Pills, search and tag links13 Link grid and narrative14 Five heroes15 Footnotes, questions and pre-footer16

Editorial pages

9
Article page01 News post02 News post with reading aids03 Area page04 Science index05 Letters index06 Launch page07 Reading benchLight in both themes08 Serif labLight in both themes09

Marketing sections

5
Icon set01 Section themesLight in both themes02 Code block03 Video player with a facade04 Tooltip05

Illustration

3
Drawing language01 Curve drawn by scrolling02 Drawn animation03
07

Scenes

16

Simulations on the graphics card: slime mould with a million agents, a capillary bed, a motor neuron, a beating heart, oxygen in a muscle, ink in water. Open one, click it and type, and it answers.

Simulations

16
Physarum01WebGL 2 Capillaries02WebGL 2 Motor neuron03WebGL 2, the cable equation on the CPU Mitochondria04WebGL 2 Heart05WebGL 2 Oxygen06WebGL 2 Glycogen07WebGL 2 Repair08WebGL 2 The cipher09WebGL 2, ChaCha20 ATP between the fibrils10WebGL 2 Morphogenesis11WebGL 2 TractsDark in both themes12WebGL 2 Territories13WebGL 2 Streamlines14WebGL 2 Ink15WebGL 2 Growth16WebGL 2
08

Living science

77

Physiology that moves, each animation on its own, and the biology drawings.

Cells and tissue

13
ReticulumLight in both themes01 Capillary bedLight in both themes02 GlycogenLight in both themes03 Cross sectionLight in both themes04 DiffusionLight in both themes05 NeuronsDark in both themes06 Blood smearLight in both themes07 CalciumDark in both themes08 CytoskeletonDark in both themes09 Spiral waveDark in both themes10 AlveoliLight in both themes11 MorphogenesisDark in both themes12 PhysarumDark in both themes13

Molecules and pathways

9
InterferenceLight in both themes01 BilayerLight in both themes02 ChiralityLight in both themes03 CycleLight in both themes04 Four motifs in turnLight in both themes05 Mitochondrial reticulumLight in both themes06 EncounterLight in both themes07 PathwayLight in both themes08 Membrane09

Imaging

17
FluorescenceDark in both themes01 RadiographDark in both themes02 PolarisedDark in both themes03 ThermalDark in both themes04 Electron micrographLight in both themes05 ConnectomeDark in both themes06 HistologyLight in both themes07 UltrasoundDark in both themes08 KymographDark in both themes09 Slice stackDark in both themes10 MR sliceDark in both themes11 BOLDDark in both themes12 TractographyDark in both themes13 UptakeDark in both themes14 31P spectrumLight in both themes15 SagittalDark in both themes16 AngiographyDark in both themes17

Chemistry and computation

7
IsolinesLight in both themes01 DiffractionDark in both themes02 Gas evolutionDark in both themes03 CrystallisationDark in both themes04 TurbidityDark in both themes05 ChemiluminescenceDark in both themes06 AvalancheLight in both themes07

Exercise physiology

9
OxygenationDark in both themes01 RecruitmentLight in both themes02 CrossoverDark in both themes03 W primeDark in both themes04 Step testLight in both themes05 KineticsDark in both themes06 Pedal torqueDark in both themes07 FrontierDark in both themes08 BalanceLight in both themes09

GPU fields

5
Physarum on the GPULight in both themes01 CipherLight in both themes02 ATPLight in both themes03 RegimesLight in both themes04 TractsDark in both themes05

Living fields

2
Two living fieldsLight in both themes01 Membrane panel02

Biology heroes

15
Intestinal villi01Canvas 2D, no dependencies Glycogen02Canvas 2D, no dependencies The mitochondrion03Canvas 2D, no dependencies The mitochondrial network04Canvas 2D, no dependencies Capillaries05Canvas 2D, no dependencies The lactate shuttle06Canvas 2D, no dependencies The sarcomere07Canvas 2D, no dependencies Motor units08Canvas 2D, no dependencies ATP synthase09Canvas 2D, no dependencies Calcium10Canvas 2D, no dependencies The citric acid cycle11Canvas 2D, no dependencies Phosphocreatine12Canvas 2D, no dependencies GLUT413Canvas 2D, no dependencies Hemoglobin14Canvas 2D Accent test15the color test page
09

Scene catalog

46

Smaller scenes drawn on a 2D canvas: microscopy, scans, spectra and the physiology of a working muscle.

Scene catalog

46
Reticulum01Canvas 2D Capillary bed02Canvas 2D Alveoli03Canvas 2D Isolines04Canvas 2D The step test05Canvas 2D The balance06Canvas 2D The avalanche07Canvas 2D, ChaCha20 Glycogen granule08Canvas 2D Cross-section09Canvas 2D Diffusion10Canvas 2D FluorescenceDark in both themes11Canvas 2D NeuronsDark in both themes12Canvas 2D X-rayDark in both themes13Canvas 2D Blood smear14Canvas 2D Polarized sectionDark in both themes15Canvas 2D ThermalDark in both themes16Canvas 2D Electron microscopy17Canvas 2D ConnectomeDark in both themes18Canvas 2D Calcium wavesDark in both themes19Canvas 2D CytoskeletonDark in both themes20Canvas 2D Spiral waveDark in both themes21Canvas 2D Reaction and diffusionDark in both themes22Canvas 2D Histology23Canvas 2D UltrasoundDark in both themes24Canvas 2D Physarum on the CPUDark in both themes25Canvas 2D KymographDark in both themes26Canvas 2D DiffractionDark in both themes27Canvas 2D Slice stackDark in both themes28Canvas 2D Gas bubblesDark in both themes29Canvas 2D CrystallizationDark in both themes30Canvas 2D TurbidityDark in both themes31Canvas 2D ChemiluminescenceDark in both themes32Canvas 2D MRI sliceDark in both themes33Canvas 2D BOLDDark in both themes34Canvas 2D TractographyDark in both themes35Canvas 2D UptakeDark in both themes36Canvas 2D Spectrum37Canvas 2D OxygenationDark in both themes38Canvas 2D Sagittal sliceDark in both themes39Canvas 2D AngiographyDark in both themes40Canvas 2D Recruitment41Canvas 2D The crossoverDark in both themes42Canvas 2D The tankDark in both themes43Canvas 2D Oxygen kineticsDark in both themes44Canvas 2D The pedal strokeDark in both themes45Canvas 2D The frontDark in both themes46Canvas 2D
10

Identity and instruments

16

RAMTT's mark and identity pieces, and the instruments drawn for the app.

Identity and empty states

10
About page01the glycogen drawing and the empty-state register Empty-state register02every empty-state drawing in one hand Empty-state proposals03three directions in the register’s hand Illustration system04six archetypes Biochemistry drawings05SVG Empty-state engine06a compiler from description to drawing Empty-state engine, version 107the one the benchmark compares with Landing page, the body at work08WebGL Hero, the door from the other side09WebGL Motion lab10Canvas 2D

Instruments

6
Gel portion01its own WebGL 2 ray tracer, no dependencies Trail, the sixth prototype02the last prototype before the package Trail, reading03TypeScript, the rail that ships Trail, writing04TypeScript, the rail that ships Process figures05SVG Reading trail, first study06
11

Materials

8

Living materials on WebGL and canvas: chrome, fluid, sand, particles and cloth.

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
12

Engineering

70

The controls, menus, motion, surfaces and tokens of the Engineering page, each in the state that shows it best.

Controls

10
Button01 Icon button02 Segmented control03 Switch04 Checkbox05 Slider06 Select07 Text field08 Keycap09 Field that scrubs10

Display

8
Badge01 Inline label02 Avatar03 Progress04 Tooltip05 Skeleton06 Card07 Empty state08

Menus and search

5
Options menu01 Fold-out menu02 Dock03 Command menu04 Find bar05

Navigation patterns

11
Live state01 Hover peek02 Chapter island03 Hero remote04 Morph card05 Magnetic pointer06 Odometer07 Particles08 Flip tiles09 Lens10 Curtain11

Motion

9
Layer01 Stagger02 Decisive threshold03 Enter and exit04 Underline wipe05 Typewriter06 States that snap07 Travelling focus08 Yielding work09

Surfaces

9
Sheet01 Widget board02 Anchored list03 Carousel04 Masonry05 Ticker06 Scroll header07 Infinite field08 Contour field09

Writing

4
Vanish field01 Resting notes02 Relative time03 Ink04

Tokens

6
Colour roles01 Ramp02 Type scale03 Elevation04 Radius05 OKLCH gamut06

Platform

8
Anchored popover01 Customizable select02 Carousel with markers03 Continuous corners04 Optical centring05 Disclosure06 Stuck header07 Week ring08