Animation components for Astro

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 phone app's screen drawn from rows instead of a screenshot: a status bar, a title, then rows of fourteen kinds (a big figure, a ring of progress, a checklist, a bar chart, a card, chips, a map with a route, a player, a chat, a list, a week of days, a button, a lock screen's clock, a notification) and a tab bar.

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 row of panels where the one pointed at or focused widens and shows its words, and the others narrow to a strip with their title turned up the side.

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".

A statement that fills in as it is read: the words start faint and take their full colour in reading order, line after line, while the block crosses the viewport.

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.

Reeded glass over whatever is behind it: the box's backdrop blurred and lightly brightened, cut into vertical flutes (or flutes at an angle), each with a light edge and a shade, as a pane of fluted glass bends what is behind it into strips.

A group whose item pointed at or focused stays as it is while its siblings step back: dimmed, and a little smaller or softer if you ask.

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

A ring, a three-quarter arc or a half circle that fills to a value as it scrolls into view, the number counting up in the middle with it and a label under it.

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 button that asks to be held for a moment before it acts, for the one action on a page that should not happen by a slip: delete, cancel a booking, send for good.

A building drawn flat, for a listing that has no photograph yet: a house, a terrace, an apartment block, a villa, a cabin, a tower, an office or a shop, in the colour of the block or tone it sits on, with a shade, a light and the windows mixed from it.

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 round magnifier that follows the pointer over a picture.

Soft beams of light falling from the top edge or a top corner over whatever is behind them: a fan of blurred gradients, each a little wider, brighter or slower than the next, swaying a few degrees on its own clock and blended as light (screen).

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.

A drawn picture for a slot that has no photograph yet: a sun over the sea, a split gate, a flower, a grid of tiles, a phone going live, a plate set for dinner, waves under a moon or three shapes.

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.

One line that says whether a place is open now and until when, or when it opens next, read from the week's hours in the place's own time zone, whatever the reader's clock says.

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, columns, iris, tiles, peel, 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.

A repeating pattern behind a box's content: stripes, diagonals, checks, crosses, zigzags, waves or hexagons, drawn by CSS gradients or one small inline SVG tile used as a mask, in one colour at a strength, and faded towards the bottom or the edges if asked.

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 picture that resolves from blocks as it scrolls into view: a grid of squares in one colour lies over the slot, and each square clears on its own stretch of the picture's entry, picked by a seed, so the picture comes through in a scatter and stands whole by the time it is a third of the way up the screen.

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 drawn portrait for a slot that has no photograph yet: a speaker, an artist, a host, a member of a team.

An opening that plays once as a page loads and then gets out of the way, in one of three cuts: words (two to four words in turn, then the layer lifts), stairs (the layer is columns that rise away one after another) or split (a word, then the layer parts in two).

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

A product drawn flat, for a shop slot that has no photograph yet: 29 drawings in six sets (clothes, ceramics, coffee, skincare, furniture and objects, bakery).

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 QR code for a URL or a short text, encoded at build and drawn as one SVG path inside the quiet zone a reader needs.

A round button whose items fan out around it in a ring or an arc.

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.

A room drawn flat, for a stay that has no photograph of it yet: a single, a double, a twin, a suite, a family room, a bunk room or a loft, in the colours of the block or tone it sits on, with a shade, a light and a pale tone mixed from them.

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.

A form, or any flow, in steps: a rail of the steps' names over the step in hand, with Back and Next under it.

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 short tip anchored to a word, a code or a button: it shows after a moment on hover and at once on focus or a tap, stays while the pointer moves onto it, flips when there is no room, and Escape hides it.

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 row of bars drawn from a word, like the shape of an episode's sound.

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..

The people a buyer deals with: each drawn by PortraitArt on a colour block, with the name, the role, the areas and languages, a figure or two, a line in their own words, and a call and an email as links.

An AI agent's run, replayed in the page: the task at the top, then four lanes that fill in order (the plan ticks off, tool calls spin and finish with their time, a diff writes in line by line, a person is asked to approve and the approve reads Approved), then the result with its numbers.