Components

Native <details> items whose height animates open and closed, with an optional one-at-a-time rule the browser enforces.

Sends packets of light along curves between nodes.

Six line icons that morph into a second state: menu to close, plus to close, copy to check, play to pause, sun to moon, and a check that draws itself.

Shows notifications arriving one at a time: the new one drops in at the top, the older ones are pushed down, and the oldest slides out.

A native select with an animated picker.

A button whose arrow slides out on hover as a new one slides in.

Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps.

A row of overlapping avatars with a count chip such as "+2 398".

A bar chart whose bars grow from the baseline one after another when it scrolls into view; hovering a bar shows its value.

A beam of light travels around the edge of a card.

A browser window around a screenshot or any content: the three lights, an address bar with a lock, optional tabs with one active.

Swells the letter under the cursor to the heaviest weight and lifts it; its neighbours follow at half and a quarter, and everything settles when the pointer leaves.

Cards stick to the top as you scroll and each one shrinks and dims as the next slides over it, as on Apple product pages.

A scroll-snap strip with previous/next buttons and dot markers that the browser generates and keeps in sync.

A checkbox whose tick is drawn.

A ring of text turning slowly around an icon, a logo, or nothing.

A code block with tabs (for example npm, pnpm, bun) and a copy button per panel.

A ⌘K command palette: a native modal dialog with an input and a ranked list of links.

Fires a burst of paper confetti on load, on a click or on an ma:confetti event.

A button that copies text to the clipboard: the icon turns into a check, the label says "Copied", and both come back after the ambient duration.

Counts a number up from zero to its value when it scrolls into view, with thousands separators, decimals, prefix and suffix.

A flip clock counting down to a date: days, hours, minutes, seconds, each a card whose top half folds down over the hinge when the number changes.

A preloader that counts from 0 to 100 and then lifts like a curtain, on a fixed layer that never blocks the page: pointer-events none from the first frame, aria-hidden, the page rendered and usable beneath.

A custom pointer that trails the real one: a dot, a ring that grows over links and buttons, or a label ("View") any element can ask for with data-cursor-label.

A field of cells that light up under the cursor and fade where it has been, with a slow idle sweep when nothing is touched.

A full-viewport wipe between pages: the next page opens through an iris from where you clicked, or through blinds, a shutter, doors, pixels, staggered columns, a diagonal, or a title panel that carries the next page's name.

A native modal that scales in over a blurred backdrop and scales out again, closes on Escape, the close button or a backdrop click, and traps focus, all handled by the browser.

A macOS-style dock: the tile under the pointer swells, its neighbours swell less, and the row pushes apart to make room.

A field of dots behind content, faded toward the edges, with an optional slow pulse.

A world map drawn as a grid of dots, with markers that pulse.

A bottom sheet that slides up over a scrim and can be dragged closed: it follows the finger, and on release springs back or leaves depending on distance and velocity, interruptible mid-flight.

A black pill that changes shape with its state.

A project tree whose folders open with an animated height, a turning chevron and a folder glyph that tips open; rows can be lit up to say "this is the file you change".

Filter buttons over a grid of cards: the cards that stay slide to their new places, the ones that go fade out, the ones that return fade in.

The page content slides up to reveal a footer that is already in place underneath.

Splits text into two coloured copies and jumps a few slices sideways for a fraction of a second, every few seconds; the rest of the time the text is clean.

A turning globe of dots that you can drag.

A field of braille dots that reads as a flowing contour map: two waves cross it, the colour turns along a sunset arc, and the cursor carves a trail that decays one dot at a time.

A gradient fill drifting slowly through the text with no seam at the loop point.

A hairline grid behind content, faded toward the edges, optionally drifting one cell at a time.

A highlighter sweeps across the phrases you marked, one after another, when the sentence scrolls into view.

A strip of items slides sideways while the page scrolls down and the section stays pinned.

A list of project links: hovering one floats its image beside the pointer, leaning the way the pointer moves, while the other links step back.

A poster card that plays a muted clip while the pointer or focus is on it and rewinds when it leaves.

Compares a before and an after image with a line you drag between them.

Small images pop up along the pointer's path and fade behind it.

A thumbnail gallery whose images open full size: the image grows out of its own thumbnail on a same-document view transition and returns to it on close, and ← → move through the set.

A link that shows a small card (image, title, one line, domain) after a moment on hover or focus, above everything, flipping when there is no room.

A glass pane that blurs and tints whatever is behind it.

A button or icon is pulled toward the cursor while it is nearby and springs back when it leaves.

Infinite scrolling strip for logos, quotes or tags in any direction.

Streaks falling diagonally across a twinkling sky.

Film grain over a gradient or image, blended and flickering at 12 fps.

A number whose digits roll to the new value when it changes.

A sphere of light that breathes and slowly turns its colour.

The children orbit the centre of their parent and stay upright.

A one-time code in cells, from one native input.

Animates a named region between pages: rise, zoom, wipe, scope, fade, slide, or the browser's own shared-element morph.

An element drifts at its own speed as it crosses the viewport, exactly in step with the scroll.

A field of drifting dots that part around the cursor, on a canvas that draws only while on screen in a visible tab.

An audio player that keeps playing while you navigate: the same <audio> element is carried into the next page by Astro's router, so position, volume and playback never restart.

A generic phone frame around a screenshot or any content, with three cut-outs (island, notch, punch), a home bar, and no logo, buttons or brand.

A floating pill of links whose active pill glides to the page you chose.

A popover that opens beside its trigger, flips when there is no room, closes on outside click or Escape, and animates in and out.

A monthly / yearly toggle whose prices roll to the other amount instead of swapping.

A bar that fills to its value when it scrolls into view, with the number counting up beside it, or a ring with the number in the middle.

An edge that blurs what scrolls under it, more the closer it gets: a few bands, each with a backdrop blur twice the last and a mask that keeps it to its own slice, so the blur ramps instead of stepping.

The AI prompt box: a form with a textarea that grows with its content through field-sizing, a model select, an attachment button that is a real file input, and a send button that dims until something is typed and spins while the form carries data-pending.

A table of contents that lights up as you read.

A perspective grid floor sliding toward the viewer.

Rings expand from a point and fade, one after another, like a pulse.

Cycles through a list of words in place.

An image that starts narrow and rounded and opens to the full width as it scrolls into view.

A hairline along the top of the viewport that fills as the page is read.

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

Bind translate, scale, rotate and opacity to the scroll position: the element goes from the start values you give to neutral across a range of its own passage through the viewport, exactly in step.

A highlight sweeps across the body of a button on a loop; hover lifts it on the preset's hover travel and adds a ring, and focus draws the same.

A highlight sweeps across the text every few seconds.

Placeholder lines, optionally with an avatar, shimmering while content loads.

A small line chart that draws itself from left to right when it scrolls into view; the last point lands and pulses.

An indeterminate arc whose length breathes while it rotates, so it looks like it is working rather than spinning a fixed wedge.

A departures board: every character spins through the alphabet and locks, one cell after another, when the board scrolls into view.

Splits a string into words, characters or lines on the server and reveals them with a capped stagger when they scroll into view.

A soft radial light follows the cursor over a card and fades in only while hovered.

A burger that opens a full-screen menu (or a top sheet, or a side panel) whose items arrive one after another and leave in reverse.

One submit button with four faces (idle, pending with a spinner, done with a check that draws itself, error) and a width that follows the label.

An announcement ribbon that sticks to the top of the page and folds away when dismissed, the content below sliding up on the preset curve.

Steps on the left scroll by; one visual on the right stays put and changes with them.

A headline's outline draws itself glyph by glyph when it scrolls into view, then the fill comes in.

A toggle that springs.

Tabs with an indicator that slides to the selected one and panels that fade in.

A label rolls upward into a copy of itself on hover, letter by letter from the left, and rolls back when the pointer leaves.

Random characters resolve into the real text from left to right when it scrolls into view, on load, or on hover.

Cycles system → light → dark, and the page changes theme through a circle that grows from the click, on a same-document view transition.

A card leans toward the cursor in 3D, lifts slightly, catches a glare, and settles back on the active preset's spring when the cursor leaves.

Notifications that slide in, stack behind each other, push up as new ones arrive, and expand into a list on hover.

A line beside an article fills as it is read, with a dot at its head.

Types a string one character at a time in any font, with a caret that stays solid while typing and blinks once idle.

A link underline that enters from the left on hover and leaves to the right, so the exit continues the entrance instead of rewinding it.

Placeholders that take turns, and text that blurs away on submit.

A poster with a breathing play button that opens the video in a dialog: a file with native controls, or an embed.

A wave of boldness rolls through the letters of a line, each character animating its font weight on its own delay.

A 404 page: the code scrambles into place from random digits, rings spread slowly behind it, and the headline, copy and one link home arrive in three beats..

Shows blog posts as cards, with the first post featured across two columns.

A closing call to action: a deep brand panel with an aurora and film grain behind it, a headline that catches a shine, a magnetic primary action, a secondary one, and a typed command.

Lists dated releases in a hairline list.

Compares your product with others in an "us versus them" table.

Draws slow noise waves on the GPU, ordered-dithered into pixel cells of one colour on the page's ground, for the look of a 1-bit screen.

A documentation layout: a sticky sidebar with the current page marked, a reading-progress hairline bound to the scroll, the header and content revealed in two beats, and previous/next links.

A split hero: a tall headline revealed line by line on the left, a live panel sliding in from the right, on a slowly drifting grid.

A heading and lead beside a native accordion: one question open at a time, heights animated by the browser, keyboard and screen reader handled by <details>.

Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps.

Shows features in alternating rows of copy and a visual.

A hero with a field of glyphs behind a panel in the brand colour (ink on a page without a theme) whose meta line, headline and actions wipe in one after another.

Moves thousands of particles along an invisible current, leaving fading trails.

Draws smoke that follows the cursor.

A site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge.

Draws a cluster of liquid drops that merge and pull apart: metaballs on the GPU with a compact kernel, cut with an edge exactly one pixel soft.

A complete hero as one component with props: an ambient aurora, a headline split and revealed word by word, supporting copy with a rotating word, two actions and a typed command.

Draws a jump to light speed: streaks of light rush out of a vanishing point, longer and brighter toward the edge, in one colour with a hot head in a second tone.

Covers content with a layer that the cursor washes away like ink in water, showing what is underneath.

A grid of integrations, tools or partners: cards with an icon, a name and a line, each lit by a spotlight that follows the cursor and lifting on hover, revealed with a tight stagger..

Draws a pool of liquid metal.

Makes an image turn liquid under the cursor and settle back.

A "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger.

A menu bar whose panels open as popovers anchored under their triggers, columns revealing with a stagger, closing on Escape or outside click.

An email signup section built on a real form: native validation, an invalid state that only shows after the user has typed, a submit button whose label swaps for a spinner when the form carries data-pending, a status line for your handler, and a dot field behind.

Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak.

Shows pricing plans side by side, with an annual/monthly toggle that swaps every price with zero JavaScript (radios and :has), the highlighted plan wearing a travelling border beam, cards revealed with a stagger.

A feature-by-plan comparison: the highlighted plan's column lit, rows revealed with a 40 ms stagger as the table scrolls into view, and a header row that sticks when you cap the table's height.

Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone.

Shows big numbers that count up when scrolled into view, 120 ms apart, with labels and an optional bar under each, in a hairline row.

A vertical timeline: the line draws itself down the page in step with the scroll, each step revealing from the line's side as it is reached, markers numbered or dated.

A sticky navigation bar that condenses over the first 120 px of scroll: the row tightens and a hairline appears, bound to the document's scroll timeline.

Shows team members in a hairline grid: portraits that tilt toward the cursor with a glare, initials when there is no photo, names and roles revealed with a stagger..

A hero for developer tools: split headline on the left, a terminal window on the right that types the install command and prints its output line by line, on a pulsing dot field.

Shows testimonial quotes in a staggered grid.

Shows two rows of testimonial cards drifting in opposite directions, pausing while hovered so any quote can be read.

A thanks page for after a signup: a headline, the reader's place in line rolling up, a referral link with a copy button, and one burst of confetti.