Components
323 components. Copy the source into your project and make it yours.
Foundations2
Tokens, type, icons and the small pieces everything else uses.
Color
The six named colours, every semantic token, contrast for each fill and its text, and the shadow scale, read live from the theme.
Typography
The three type families and their roles, the size scale, display and body settings, and tabular numerals, measured live from the page.
Backgrounds & effects48
Grids, light, weather and texture to set behind content.
Camera Tiles
The camera feed as a grid of soft tiles that rise where something moves, with a drifting pattern until the camera is turned on.
Caustics
Sunlight on the floor of shallow water: a soft network of light that shifts slowly and bends around the pointer.
Colour Pool
A pool of soft colour: blurred blobs drift on slow loops over a base colour, and one follows the pointer.
Constellation Card
A card with a field of dots where a constellation lights up and joins on hover or focus.
Current Lines
A fan of fine current lines behind your content, with short pulses of light travelling along some of them.
Diamond Dust
Tiny crystals that hang in the air, flicker and drift: dots and four-point glints, as a full background or a strip under a title.
Dot Flood
A matrix of small square dots that floods across a surface from a point and keeps shimmering, usually inside a card on hover or focus.
Drifting Clouds
Soft procedural clouds drifting across a winter sky, drawn by a WebGL fragment shader.
Drifting Ice
Ice floes on open water that drift and turn on a slow current and bump into each other; the pointer pushes them aside and a click cracks one.
Footprints
A snow field that keeps a track of where the pointer has been, pressed into the surface, while falling snow slowly fills it in.
Grain Frame
A frame of slowly drifting colour under a fine layer of grain, used as a living border or a full background.
Hatching
Fine engraved hatching behind or around your content: diagonal, horizontal, vertical, cross-hatched, or rows of seigaiha waves.
Ice Blocks
A field of ice blocks that rise and fall as waves spread out from the pointer, with drops that start ripples when it rests.
Ice Tiles
A grid of ice tiles laid back in perspective; each tile the pointer crosses lights up and slowly melts back.
Icicles
Icicles hanging from the top edge of a container; they lengthen slowly, drip, and snap when touched.
Ink Wash
Ink blooming in clear water: each press releases a bloom that billows, folds on itself and thins as a slow current swirls it away.
Koi Pond
A few koi drifting under the surface that come to circle a resting pointer and dart away when you click.
Lake Freeze
Ice that grows across a surface in feathery fronts from its edges, and breaks into plates that melt away when it thaws.
Layered Waves
Layers of slow translucent waves filling the lower part of the frame, deepening where they overlap.
Low Sun
A cone of low sunlight that sweeps in from a top corner, settles on your content and breathes slowly.
Mask Reveal
A second version of the content, a water-blue layer seen through a round hole that follows the pointer and opens wide over the text.
Moonpath
The moon over open water and the flickering road of light it lays toward you; by day a low sun and a warm path.
Path Bloom
A tall sticky section where five streams braid across the screen and join into one river as you scroll, with an action where they meet.
Photo Pocket
A badge with up to three photos tucked into a small pocket that rise and fan out on hover or focus.
Pond Grid
A grid of cells like a still pond: clicking a cell sends a ring of light outward across the grid.
Pulse Dots
A grid of fine dots that pulse one by one; the brightest carry a soft halo, and dots near the pointer light up.
Rain on Glass
Rain on a misted window: drops gather, run and merge, leave trails of beads that slowly dry, and each one holds a small upside-down view of the world behind the glass.
Raked Sand
A raked gravel garden whose grooves bend into rings around the stones standing in it; drag to rake new furrows.
Reading Stream
A line down the side of an article that fills with water as you read, with a droplet at its end and a ring for each section.
Refracting Glass
A clear panel that bends whatever is behind it, strongest at the rim, with frosted glass as the fallback.
River Lanterns
Paper lanterns drifting down a river at night, each with a long wavering reflection; by day they become paper boats.
Scattered Photos
Photos scattered around a heading at different depths, fading in on mount and shifting with the pointer like near and distant ridges.
Spindrift
Fine streaks of snow blown low along the ground in gusts, rising and dipping together like a veil.
Spotlight Beams
Two fans of light from the upper corners that sway slowly toward each other and back.
Star Field
A quiet twinkling star field and an occasional shooting star, as two layers you can stack.
Steam
Soft wisps of steam lifting from the bottom edge in front of your content, curling and thinning as they rise.
Still Water
A calm water surface behind your content: the pointer presses ripples into it as it moves, a click drops a stone, and now and then a raindrop lands.
Wave Lines
Evenly stacked wave lines that draw in from the left and then undulate slowly behind your content.
Whirlpool
A whirlpool of particles circling a centre, turning faster as they spiral inward, with short trails.
Wind Map
A field of moving air drawn as thousands of short fading trails, faster air brighter and longer, with speed and bearing under the pointer.
Cards33
Surfaces that hold one piece of content and answer the pointer.
Card Drift
A row of cards that scrolls sideways forever, each one bobbing slightly like something on water.
Card Shuffle
A small stack of cards that cycles, with the front card leaving and rejoining at the back.
Character Picture
Turns an image into a picture made of characters, sized so the columns fill the width, with an entrance where the characters fall into place.
Cipher Card
A card covered in hidden characters that show, and keep shifting, only where the pointer shines, around a round seal with a short word.
Contour Card
A card drawn over a living contour map: a low hill follows the pointer, the lines flow around it, and a small label reads the elevation underneath.
Depth of Field
A grid of image cards where the one under the pointer stays sharp and the rest blur with distance, like depth of field.
Dot Mosaic
An image rebuilt as a mosaic of dots in its own colours, sized by tone, which scatter around the pointer and spring back.
Floating Card
A solid colour card that drifts toward the pointer while its content drifts the other way, as if floating.
Flood Hover
An image card whose overlay floods in from the side the pointer entered and drains toward the side it leaves.
Foil Ticket
A ticket that tilts deeply toward the pointer and casts a long shadow away from it, with a foil strip that shifts colour as it turns.
Frost Glass
A pane that frosts over when left alone; the pointer wipes a clear path, and the frost creeps back in from the edges.
Hover Grid
A grid of items divided by hairlines, where one soft highlight glides to whichever item is under the pointer or focused.
Hover Note
A rich floating card that appears beside a word in running text and follows the pointer, leaning slightly as it moves.
Instant Photo
An instant print that develops while you watch: shadows first out of a grey-green haze, colours last.
Kintsugi Card
A card crossed by fine cracks that fill with gold, poured from the point nearest the pointer, when you come near.
Loose Prints
Photo prints scattered on a surface that you can pick up, throw against the edges and pile on top of each other.
Map Fold Card
A folded paper map that pulls open sideways in accordion pleats, then unfolds downward into a sheet that keeps its creases.
Opening Rows
A list of compact rows where choosing one opens it in place into a full dialog card, and closing folds it back.
Origami Card
A small folded square of paper that opens hinge by hinge into a flat card, keeping its creases.
Postcard Flip
A postcard whose corner curls up under the pointer and is carried across until the card has turned over, showing the message side.
Receipt Card
A paper receipt that feeds out of a printer slot line by line, with dotted leaders, a barcode and a serrated edge.
Ridge Card
A card holding a mountain range in depth: five ridges that shift with parallax as the card tilts, with haze drifting between them.
Sensu Fan
A folding fan that spreads its ribs from a pivot and unfolds a pleated leaf with a picture, or a menu, printed across it.
Sheen Card
A portrait card that tilts slightly while a band of glare slides across it with the pointer, like light on ice.
Snow Globe
A glass dome on a lacquered base with a scene inside; shake it and the snow lifts off the floor, swirls with the water and settles again.
Stamp Card
A stamp rally card: pressing an empty ring brings a seal down and leaves an inked impression.
Tanzaku Card
Narrow paper strips tied to a line by short threads, each a damped pendulum that swings and twists when touched and stirs its neighbours.
Terminal Replay
A terminal window that types out commands after a prompt and prints their output line by line.
Ticket Stub
A paper ticket with a perforated stub that swings open as you pull it, breaking one perforation after another, then comes away and falls, leaving the ticket marked as used.
Tilt Card
A card that tilts toward the pointer while its contents lift off the surface at different depths.
Torch Card
A plain card where a soft light follows the pointer and reveals a pattern that is otherwise invisible.
Typing Keys
A compact keyboard drawn in CSS whose keys sink and fill with water blue as you type on your own keyboard.
Weather Card
A forecast card whose background is a small live scene of the weather, from clear sky to thunder.
Text effects24
Headlines that type, reveal, shimmer or rearrange themselves.
Brush Annotation
Hand-brushed ink marks over inline text: underline, double underline, circle, strike, bracket and highlight.
Colour Wave Text
A word whose letters take palette colours by position and pass each one on in a slow wave.
Decode Text
Text that starts as scrambled characters and resolves to the real text one character at a time.
Evaporating Word
One word in a sentence that evaporates letter by letter and condenses into the next.
Flowing Letters
Letters filled with thin wavy lines of colour that flow sideways like water, drawn on a canvas in the surrounding font.
Frost Text
Letters that freeze into being: fine branching crystals grow along each outline from a few seeds, then the face fills with sparkling frost.
Haiku Reveal
Three lines written in turn by an unseen brush, stroke by stroke with the ink heavier where it presses, and a seal pressed at the end.
Ice Crack Text
Lettering made of ice that cracks in branching lines under the pointer and shatters into angular shards that hang, then draw back together.
Ink Bleed Text
Words that appear the way ink spreads into wet paper: each starts as a soft blot and tightens into crisp letters.
Marker Headline
A headline with a phrase marked by a sweep of colour, on a field of fine dots that turn water blue under the pointer.
Melt Text
Lettering that thaws under the pointer: drops bead at the bottoms of the letters, lengthen and fall into a faint puddle.
Outline Lettering
Large outlined lettering that draws itself in, and whose outline lights up in colour around the pointer.
Ripple Text
A line of text that behaves like a water surface: pressing a letter sends a wave both ways along the line, and the pointer pushes a small bow wave ahead of it.
Slipstream
Slipstream: a few words in a marked box that streak with speed lines and lean forward when you hover them.
Snow Cap Text
Large text that snow falls around and settles on, gathering in soft caps along the real tops of the letters until a letter is knocked.
Split-flap Board
A split-flap departure board whose flaps fall through a few characters to each new letter, rippling across the columns.
Tide Text
An outlined headline that holds water inside its letters, with a moving surface that sloshes when the level changes.
Turning Word
A word in a small recessed box that turns over to the next word, while the box springs to the new width.
Typed Phrases
Phrases typed out after a fixed prefix, held, erased and replaced, with a water-blue caret.
Vertical Text
Text set top to bottom in columns that run right to left, with Latin turned or upright, numerals stood upright in pairs and punctuation hung outside the measure.
Waterline Card
A card where moving the pointer across it pulls a glowing waterline, and the text behind the line reads differently.
Wavering Text
Text that wobbles as if drawn by hand, or wavers as if seen through moving water, using an SVG displacement filter.
Word Chip
A phrase whose last word sits in a chip and keeps changing, while the text around it slides to make room.
Scroll & parallax5
Motion tied to how far the page has scrolled.
Opening Laptop
A laptop drawn in CSS whose lid opens as you scroll, until the picture on its screen lifts out and grows over the keyboard.
Scroll Story
Sections of text scroll past on one side while a panel on the other stays put and changes to match the section in the middle.
Sliding Columns
A wall of images in columns that slide at different rates as you scroll, leaning slightly while the scroll is fast.
Tilt-in Panel
A large framed panel under a heading that starts tilted away and lies flat as the page scrolls it into place.
Tilted Rows
A header over three rows of cards on a tilted plane that straightens as you scroll while the rows slide apart.
Cursor & pointer5
Effects that follow the pointer or answer it.
Ripple Cursor
A surface that answers the pointer with thin light and dark rings that spread and fade along its path, and a stronger double ring where you click.
Selection Box
A phrase gets a box drawn round it, and a pointer arrives at its corner as if someone just selected it.
Snow Trail
Inside its area the pointer sheds a short trail of tiny flakes that fall, drift and fade, and a click throws a small flurry.
Buttons19
Actions, from plain buttons to ones with a little motion.
Button Collection
Twelve button treatments in one component, from a lifting ink button to a key that presses down.
Close Button
A round button with a cross that turns a quarter turn on hover, for dismissing banners, tags and dialogs.
Drip Button
A button that gathers a drop of its own colour on its lower edge and lets it fall, with a small ring where it lands.
Hanko Stamp
A press-and-hold confirm control that charges, then brings a seal down and leaves a red impression.
Ice Button
A button made of ice: pressing sends fine cracks out from the press point, and they heal as the surface refreezes.
Icon Button
A square button that holds only an icon, in the same six weights and three sizes as Button, with a pending state.
Lantern Button
A paper lantern with wooden rims that lights from inside when hovered, with the faint unsteadiness of a flame.
Link Button
An inline text action styled as a link, with an underline that draws in on hover and focus.
Paper Plane Send
A send button whose glyph folds into a paper plane and flies off on a dashed trail, circling while a promise is pending.
Pointer Pull
A wrapper that lets whatever is inside drift toward a nearby pointer and spring back when it leaves.
Pond Button
A button whose surface is water: a press sends rings out from the press point and a little way past its edge.
Progress Button
A button that shows its work: water rises while it waits, fills with a check on success, and flashes camellia with a retry label on failure.
Pull Cord
A switch you pull: an elastic cord with a glass bead that clicks past a threshold, springs back and swings to rest.
Rim Light Button
A button whose border carries a soft arc of light that circles it and floods the whole border on hover.
Snowflake Like
A favourite toggle whose snow crystal fills from its centre and throws six tiny flakes along its arms, with an optional count that ticks.
Inputs & forms25
Fields, toggles and the other parts of a form.
Abacus Input
A number entered by sliding beads on a wooden abacus, one rod per digit, with each rod also a spin button you can type into.
Checkbox
A check box that floods with water when turned on, with groups, an indeterminate state and a card variant.
Clock Face Picker
Pick a time by dragging the hands of an analogue clock, with the time shown digitally above and an AM/PM switch for 12-hour use.
Day Night Toggle
A switch drawn as a small snow landscape where the sun sets behind the ridge, the moon rises and the stars come out.
Dial Thermostat
A round dial you turn by dragging, scrolling or with the arrow keys, its arc running from water blue at the cold end to camellia at the hot end.
Droplet Search
A search pill that stretches open while a droplet holding the icon splits off its end.
File dropzone
A drop area with a small stack of paper that lifts on hover and fans out when files are dragged over, listing the chosen files below.
File upload
A drop area for files, with each file checked for type and size and shown as a row with upload progress.
Input OTP
Boxes for a one-time code, drawn over one real input so typing, pasting and autofill all work.
Ridge Slider
A slider whose track is a ridgeline: the marker climbs the path as the value changes and the readout gives the percentage and the altitude there.
Season Wheel
Pick a month, or a span of months, from the year laid out as a ring tinted by season, each month with its own small glyph.
Signature Pad
A paper area you sign with a brush: ink thickens when you slow down, thins when you hurry and bleeds a little where each stroke begins. A Type instead switch lets anyone without a pointer type their name, set in a script hand.
Slider
A slider for a single value or a range, with a value bubble while dragging and optional tick marks.
Snowdrift Input
A pill search field with rotating placeholders whose text blows away like drifting snow when submitted.
Thermometer Slider
A slider drawn as a glass thermometer whose liquid column springs to the value and shifts from water blue to camellia as it warms.
Tide Range
A two-thumb range slider drawn as a strip of moving water, with bobbing buoys for thumbs and deeper water between them.
Selection & pickers10
Choosing a value: selects, comboboxes, dates and colours.
Color picker
Pick a colour by eye on a saturation and brightness area, by hex value, or from presets taken from the theme.
Date calendar
A month on the page for choosing one date or a range, with one or two months side by side.
Date picker
A date field typed one part at a time, with a calendar in a popover, for one date or a range.
Route picker
A line of stations drawn as a strip map, for choosing where to get on and off, with the fare and journey time beneath.
Seat map
A rail carriage drawn from above, with seat pairs, an aisle, doors, racks and windows, for choosing seats across several cars.
Select
A field that opens a list of options and keeps one, with icons, avatars, sections and an optional search.
Tag Group
A labelled set of tags for filtering, choosing or removing, with keyboard navigation between them.
Time field
A time typed one part at a time, with arrow keys to step each part, on a 12- or 24-hour clock.
Timetable picker
A station timetable with one row per hour and the minutes set out along it, for choosing a departure and seeing when it arrives.
Overlays15
Dialogs, drawers, popovers, menus and tooltips.
Avatar Tags
A row of overlapping avatars, each with an ink name tag that springs in and leans with the pointer.
Command palette
A searchable list of every page and action, opened with ⌘K or Ctrl+K and driven from the keyboard.
Context menu
A menu that opens where you right-click, or from the keyboard with Shift+F10, with icons, shortcuts and submenus.
Drawer
A panel that slides in from any edge of the window, with a bottom sheet you can drag down to dismiss.
Dropdown
A menu of actions or choices that opens from a button, with icons, descriptions, shortcuts, sections and submenus.
Noren drawer
A drawer from the top edge whose content is covered by three cloth panels on a rod, which part as it opens and fall back as it closes.
Popover
Rich content anchored to a trigger, with an optional arrow, that flips when there is no room.
Ripple menu
A menu that spreads in rings from where you press and hold, right-click or tap its button, choosing the action you move toward.
Snow toast
Notifications that drift down from the top of the window like large flakes, settle on a pile at the bottom, and melt when dismissed.
Surfacing Modal
A dialog that surfaces from below, tipped back and coming into focus, opened by a button whose label slides away for an icon.
Tide sheet
A bottom sheet whose top edge is a slow wave, resting at three heights and dragged like a water level.
Navigation19
Headers, tabs, docks, breadcrumbs and banners.
Breadcrumb
A trail of links showing where you are, with the middle steps folded into a menu when it gets long.
Collapsible sidebar
A sidebar that rests as a strip of icons and opens to full width while the pointer or keyboard focus is in it.
Compass Nav
A compass whose needle swings toward the destination under the pointer or the section in view, and whose dial turns to bring the chosen destination to the top.
Control Island
A small floating island of controls that opens into a panel of options when one of them is chosen.
Depth Gauge
A slim gauge at the edge of the page that reads how deep you have scrolled in metres, darkening from pale surface water to the deep; click or drag it to go to a depth.
Furin Bell
A notification button drawn as a glass wind chime whose paper strip carries the unread count and which swings when something arrives.
Gate Transition
A wrapper that switches between views through a ticket gate: two flaps swing shut across the middle, a lamp lights, the content changes behind them and the flaps swing open, all in 600ms.
Gliding Menu
A bar of menus that share one panel, which glides and reshapes itself as you move from one menu to the next.
Hiding Banner
A bar at the top of the page that steps aside while you scroll down and returns when you scroll up.
Nav Pill
A pill of links that floats at the top of the page, steps away while you scroll down and returns when you scroll up.
Ridge Progress
A thin band across the top of the page with a mountain ridge in silhouette that fills with water as you read, a marker that climbs the ridgeline and a flag that waves once at the summit.
Shrinking Header
A full-width header that draws in to a floating glass pill once the page starts to scroll.
Station Nav
A table of contents drawn as a railway line, with a station for each section and a small train that runs down the line as the page scrolls.
Stepping Stones
Steps in a process as flat stones across a strip of water: wet and dark behind you, rings spreading from the one you stand on, dry and pale ahead.
Tide Tabs
Tabs over a shallow channel whose indicator is a pool of water that flows to the chosen tab, stretching on the way and gathering when it arrives.
Data display28
Tables, lists, badges, timelines and figures.
Announcement
A dismissible pill or full-width strip for product news, with a label, a short message and a link.
Avatar
A person's picture in five sizes, with initials on a soft tint when there is none, a status dot, and overlapping groups.
Code Block
A block of highlighted code with a file name or tabs, optional line numbers and a copy button.
Developing Image
A frame that develops an image: a band of shimmering water-toned cells sweeps down, turning a pixel haze into the picture.
Divider
A separator between content, as a single or double line, a dashed line or a filled band, with an optional label.
Dot Matrix Display
A panel of round dots that spells messages in a 5×7 dot font, like a platform sign.
Enso
A circle drawn in one brush stroke, heavy at the start and dry at the tail, used as a progress ring or a loader.
Loaders
Six small loading indicators drawn in the current colour: bars, a wave, a snow crystal, ripples, a dot grid and a word.
Notification
A status message card with a tone icon or an avatar, a timestamp, body text and optional actions.
Path Morph
SVG paths that flow from one shape into another through a spring, with ready-made icon pairs drawn to morph cleanly.
Skeleton
Loading placeholders with a slow band of light, and a reveal that blurs them into the real content.
Snow Crystal
A snowflake grown from a seed with six-fold symmetry, for identicons, decoration or a loader.
Station Clock
An analogue wall clock with bar markers, a sweeping second hand and a minute hand that steps once a minute.
Sun Arc
The sun's path for one day: an arc from sunrise to sunset with the sun at a time you can scrub.
Ticking Steps
An overlay with a list of steps that tick off one by one, the current one held in the centre, while something slow happens.
Tide Progress
A vessel that fills with water to show progress, with a surface that sloshes when the value changes and a percentage that changes colour where the water covers it.
Timeline
A vertical timeline whose labels stick while their content scrolls past, with a line that fills with water as you go.
Weather Icon
Eleven animated weather symbols drawn as lines on a 24 grid, each with its own small, slow loop.
Carousels & media11
Carousels, galleries, image comparisons and players.
Colour Split
A picture whose red and blue channels peel apart and lean toward the pointer while the frame tilts, drawn with WebGL.
Kamishibai Slider
A paper theatre: pictures in a wooden frame with its doors folded back, each sheet drawn out sideways to reveal the next.
Showcase Carousel
A carousel with the current slide forward and its neighbours turned away on either side.
Soundscape Mixer
A small mixer of weather sounds made on the spot with WebAudio, no files: rain, wind, a stream and a fire, each with a level and a live picture of itself.
Story Cards Carousel
A row of tall cards you scroll sideways; opening one unfolds it into an article.
Testimonial Stack
A pile of portraits beside a quotation; stepping through brings the next portrait to the top.
Tide Slideshow
A full-bleed slideshow where each image washes in over the last like a tide, with content laid over the top.
Train Window
Scenery seen from a moving train: poles and trees whip past, hills drift, mountains barely move, and a tunnel carries you from one view to the next.
Two-tone Print
An image reduced to dots, lines or noise in two colours, like a woodblock or newspaper print.
Layout & grids6
Bento grids, columns and the structure of a page.
Meander Timeline
Events along a river that winds down the page in slow bends and fills with water as you scroll, with each event on alternate banks joined by a small tributary and a leaf drifting at the reading position.
Page Curl
A booklet page whose lower corner lifts into a curl when you reach for it, showing its underside and the page beneath; drag it past halfway to turn, or pull the last page back from the left.
Shoji Reveal
Paper screens on wooden lattices that slide apart, overlapping as they go, to show what is behind them.
Tatami Grid
Lays its children out as tatami mats, half or full, arranged so that four corners never meet, and re-lays the room with a layout animation when mats are added, removed or resized.
Zoom Grid
A grid of image cards where choosing one brings it forward and large while the rest of the grid dims behind it.
Globes & maps5
Globes, world maps and the routes between places.
Charts31
Lines, bars, areas and flows drawn from your data.
Area Chart
Stacked, overlapping or 100% areas in a card, with a crosshair tooltip and a legend of totals.
Aspect Rose
Avalanche danger by slope direction and elevation: eight aspects by three elevation rings on a five-step scale, each cell numbered, with its key beside it.
Barometer
Air pressure on an aneroid dial, with a settable marker needle for the earlier reading and the trend written beneath.
Comparison Area
This period as a water area over the last as a dashed line, in a card with the comparison in the tooltip.
Contour Plot
A two-dimensional field drawn as filled bands and labelled lines of equal value, with highs and lows marked, like a pressure chart.
Elevation Profile
The shape of a route from the side: altitude against distance, tinted by steepness, with flagged waypoints, a scrubber and total ascent and descent.
Funnel Chart
A horizontal funnel drawn as one smooth tapering band split into coloured stages, with each stage's share of the first and a tile per stage.
Funnel Pills
Funnel stages as horizontal pills that shorten down the list, each with an icon, its count and its share of the first stage.
Ghost Bars
Bars in tubes with the previous period as a thin ghost bar beside each and the current period outlined in ink.
Goal Bars
Daily bars in tubes against a goal tick, water when the goal is reached and paler water when not, with a week switcher.
Goal Rings
Concentric rings that sweep towards each goal on pale tracks, with a tile per ring above them.
Heatmap Chart
A matrix of rounded cells on a five-step water ramp, such as days by hour blocks, with a tooltip per cell and a ramp legend.
Horizon Chart
Many long series in little height: each row folds its area into bands of deepening water blue above a baseline and camellia below, read all at once by a vertical rule.
Precipitation Radar
A radar loop over a map: soft patches of rain and snow carried along the wind frame by frame, a sweep line, play and pause, and a timeline that scrubs.
Radar Chart
A polygon on a spider grid with labels round the outside: filled, dotted, two series as outlines, or scores with their mean in the middle.
Radial Chart
Values as arcs: concentric rings, a three-quarter gauge with the value in the middle, or a half gauge split into segments.
Ranked Bars
Ranked rows with each label on a bar showing its share, with tabs for several breakdowns and a fold for long lists.
Ridge Plot
Distributions as smooth density ridges stacked like a mountain range, nearer ridges covering farther ones, with the median and range on hover.
Sankey Chart
A flow diagram in a card: nodes as short bars, flows as tinted bands, and each node labelled with its share.
Scatter Chart
Dots for correlation, or bubbles sized by a third value, in coloured groups with a legend of counts.
Sleep Ring
A score in a ring made of one segment per sleep stage, with a large numeral in the middle and a row per stage below.
Snow Stakes
Snow depth drawn as snow standing against marked stakes, with the newest snow as a brighter layer on top.
Snow Swarm
A dot plot whose dots fall like snow and settle at their values, piling up without overlapping, and drift to new places when regrouped.
Stream Graph
Series stacked about a central baseline so they flow as one river, with names set inside each layer where it is widest.
Tide Chart
A day of tide as a smooth water curve, with high and low water labelled, night hours shaded, a now marker riding the curve and the moon's phase.
Weekday Rings
A month in weekday columns, each day a small ring towards a daily goal, with a bar per weekday showing its average.
Wind Rose
Where the wind comes from and how hard: sixteen spokes of stacked speed bands on frequency rings, with a vane that swings to the prevailing direction.
Year Grid
A year of daily counts as a grid of small squares on a five-step water ramp, with stat tiles and a control that regroups the days by week, month or year.
AI & agents13
Chat, prompts, streamed answers and agent activity.
Action Log
A running log of what an agent has done, one row per action, with the newest row in progress.
Agent Persona
A form for giving an agent a face, a name and a voice, with a water-droplet character whose eyes follow the pointer.
Agent Questions
Questions from an agent, one step at a time, with single or multiple choice, an Other answer and step pills, sliding sideways between steps.
Attachment Tray
A horizontally scrolling row of attached files above the prompt: image thumbnails and document tiles that drop in one by one and close up when removed.
Context Meter
How much of an agent's context window is in use, by category, and how close the plan's usage limits are.
Prompt Box
The message box for a chat with an agent: a text area that grows line by line, a model picker, and a send button that turns into stop while a reply streams.
Prompt Console
A two-row composer with a permission mode picker, a model picker and a context tab on top for the branch and folder.
Prompt Glow
A band of water-blue light that circles the composer's border while the agent works, with a faint glow under its lower edge.
Run Checklist
A collapsible checklist that shows how far an agent has got through a task with several steps.
Source Trail
The trail of sources an agent opened while researching, arriving one by one under the query.
Streaming Ink
Streamed text that is written rather than typed: each new word inks in from left to right with a wet sheen that dries, led by a small brush that lifts when the answer is done.
Thinking Glyph
A small animated glyph and a label with a passing band of light that say what an agent is doing right now.
Voice Orb
A sphere of water that shows a voice assistant's state: it breathes when idle, ripples with the input level while listening, turns with a slow current while thinking and sends rings outward while speaking.
Blocks22
Larger assemblies: heroes, pricing, footers and feature sections.
Activity Inbox
An inbox of activity grouped by day, filtered by tabs, with unread marks and inline actions.
Avalanche Bulletin
A public avalanche bulletin: the danger level with its name, danger by slope and height on a rose, the avalanche problems and the forecaster's note.
Calendar
A month of events in a seven-column grid, with colour per calendar, overflow into a day list, and a popover for each event.
Card sections
Three cards for marketing pages: a row of instruments read by a passing line of light, an image card that wakes on hover, and a journal card.
Data grid
An editable spreadsheet with typed columns, range selection, in-place editing, column menus, resizing, and tab-separated copy and paste.
Data table
A table wired up with search, filters, sortable columns, row selection with bulk actions, column visibility and pagination.
Departure Board
A station board on split flaps whose top train departs on a timer while the rows below move up, with delays in camellia and a flap clock.
Feature sections
Three page sections for a list of product features: a bento of small live tiles, a grid divided by hairlines, and a list that answers the pointer.
Field Notes
An article set to a comfortable measure with notes in a wide margin, each level with the words it refers to and joined to them by a thin hand-drawn line.
Figure Cards
Headline numbers in cards, each with an icon, a change from last period and an optional explanation.
Floating sidebar
App navigation in a floating panel with a team switcher, quick search, a sliding current-page highlight and an icon-only mode.
Footer Waterline
A footer where a very large word stands on a waterline over a slow swell, with its reflection beneath and links and small print below.
Forecast Strip
A week of weather in one row of day columns; choosing a day opens its hours beneath, with the temperature drawn as a line through them.
Hero sections
Two opening sections for a landing page: a centred headline over a framed preview, and a split layout with photographs that move with the pointer.
Hero Snow Water
A hero section with snow falling through the sky and water below, where the headline's last line stands on the waterline above its wavering reflection.
Hut Booking
A three-step booking card for a mountain hut: nights on a range calendar, guests and meals, then confirm, with an itemised summary that updates as you choose and a hut stamp on the booking.
Newsletter Postcard
A sign-up form on the back of a postcard: the email goes on the address lines, a postmark cancels the stamp and the card slides away as if posted.
Route Card
A route at a glance: the line drawn over a contour map, its figures, a compact elevation profile that moves a dot along the map, and save and GPX actions.
Season Pricing
Three passes side by side under a season switch, with prices that roll to new figures when the season changes.
Settings Dialog
Settings in one dialog: a column of sections with a sliding highlight, and rows of controls for the chosen one.
Snow Report
A resort's morning snow report, led by new snow, with figures that count up, lifts and runs as meters, and the forecaster's note.
Labs4
Experiments that do not fit anywhere else yet.
Fan cards
A tight stack of cards that fans open along a shallow arc when you reach for it, with a band of light crossing the title.
Feature Deck
Four cards in a grid; choosing one grows it into the main card while the others move into a row of tiles beneath it.
Layered poster
A poster built from flat layers that assemble back to front around a large title, then drift apart with the pointer.
Text stream
Rows of text carried along gentle waves, like words on a current, each row at its own pace.