A reference for the building blocks that make up this site: the colour
and type foundations, the reusable UI elements, and every named section
pattern with where it’s used.
// FOUNDATIONS: COLOUR
Colour palette
Orange is a structural accent only. Surfaces stay near-black; text steps down through four greys.
Accent
Web Blend Orange#FA5900Primary accent: CTAs, links, highlights
A path trail showing the visitor’s location, with the current page un-linked. Rendered by components/Breadcrumbs.astro, which takes the same items array the page hands to breadcrumb() for its BreadcrumbList schema.
EXAMPLE
// ANIMATION SHOWCASE
Animation showcase
Seven motion patterns the site reaches for, CSS-first where possible, with
JavaScript added only where it earns its place. Each respects reduced-motion
and degrades cleanly without script.
01
Bento grid
An asymmetric mosaic of feature tiles with varying column and row spans, each carrying a subtle gradient and a lift on hover. Pure CSS, no JavaScript.
CSS ONLY
CORECSS-first engine
ISLANDSHydration-aware
A11YReduced-motion safe
TRANSITIONSView Transitions ready
SIZE~5KB, tree-shakable
02
Infinite marquee
A seamlessly looping track of component names built from a duplicated row and a single CSS keyframe. Hover anywhere to pause. CSS-only, and frozen for reduced-motion.
A display sentence where each word fades and rises in sequence using staggered CSS animation delays. Replay restarts the sequence; reduced-motion shows the words instantly.
CSS + JS
MotionthatfitsthewayAstroalreadyworks.
04
Animated stat counters
Three figures that count up the first time the band scrolls into view, driven by IntersectionObserver. The final value lives in the markup, so it reads correctly with JavaScript disabled.
CSS + JS
100Lighthouse performance
12K+Projects animated
~5KBCore, gzipped
05
Sticky scroll-story
A two-column block: the left visual stays pinned while the right column scrolls through steps. A scroll-spy (IntersectionObserver) highlights the active step and crossfades the pinned card to match.
CSS + JS
01Install the core
02Import a component
03Apply and ship
01
Install the core
Add @astroanimate/core. Zero runtime JS ships until you opt in to an engine.
02
Import a component
Pull in a component by its subpath. Everything is fully typed out of the box.
03
Apply and ship
Drop it into your markup. Motion renders from CSS in fully static builds.
06
Before / after slider
Two stacked panels with a draggable divider. A range input drives a CSS variable that clips the top panel, so the control stays keyboard-accessible while the handle tracks the split.
CSS + JS
AFTER
BEFORE
⟷
07
Hover-reveal work list
A list of large project rows. Hovering a row scales and colours it, and floats a gradient thumbnail that follows the cursor. Without JavaScript the rows still highlight. The thumbnail simply stays hidden.
CSS + JS
Nova PortfolioHero reveal
Driftwave SaaSScroll fade
Ember DocsTypewriter
Verdant StoreCount up
// DEV-TOOL & DOCS
Dev-tool & docs
The interactive surface a developer actually operates: command palette, callouts,
API reference, integrations, and the small feedback affordances that make docs feel alive.
Every example below is live; try them right here.
01
Command palette (⌘K)
A native <dialog> overlay opened by button or ⌘K / Ctrl+K. Typing filters the grouped result list live; Escape or a backdrop click closes it.
INTERACTIVE
02
Callout / admonition boxes
Four tinted variants (Note, Tip, Warning, Danger), each with a left accent rail, an icon, a bold label, and a single body line. Pure CSS.
EXAMPLE
ℹ
Note
Components are imported by subpath, one import per component.
✓
Tip
CSS-first components ship zero runtime JS, so they render on static markup.
▲
Warning
Named (barrel) imports from the package root are not supported.
✕
Danger
Removing a client directive from an opt-in island disables its motion entirely.
03
API reference block
A method pill plus monospace path, a description, a params table, and a request/response area with cURL / JSON tabs that switch on click.
INTERACTIVE
GET/api/v1/components/typewriter-text
Returns the prop schema and defaults for the TypewriterText component.
A segmented control: System / Light / Dark. Toggling it restyles only the sample card below, not the page.
INTERACTIVE
// PREVIEW
Animate Astro fast
This card previews the selected theme. The rest of the site stays untouched.
Get started
07
“Was this helpful?”
A small docs-footer card. Clicking 👍 or 👎 swaps the card to a thank-you state.
INTERACTIVE
Was this page helpful?
✓Thanks for the feedback.
// SOCIAL PROOF & CONVERSION
Social proof & conversion
The blocks that build trust and move visitors to act: logo walls, testimonials,
case studies, capture forms, and the reassurance bars that sit beside a CTA.
01
Logo cloud / “trusted by” strip
A muted row of company wordmarks under a small label. Marquees slowly and pauses on hover.
A multi-column masonry of quote cards: quote, initials avatar, name and role. Static.
EXAMPLE
“We dropped Framer Motion and shipped the same hero reveal with zero runtime JS. Lighthouse went from 82 to 100 overnight.”
AOAda OkaforLead Engineer @ Nebula
“The Islands-aware approach is exactly what Astro was missing. Motion that never forces a hydration I did not ask for.”
MLMarcus LeeFounder @ Driftwave
“CSS-first by default just makes sense. Our bundle barely moved.”
PNPriya NairFrontend @ Coreframe
“prefers-reduced-motion handled for us out of the box. One less accessibility checkbox I have to chase every release.”
SHSven HoltAccessibility Eng @ Lumen
“Tree-shakable, typed, and the docs are honest about what ships JS and what does not. Rare combination.”
YTYuki TanakaStaff Eng @ Northpeak
“Composes cleanly with View Transitions. Page changes feel native now.”
ERElena RossiTech Lead @ Vanta
03
Quote slider
One large rotating testimonial. Prev / next buttons and dots advance it; it also auto-advances every 6s.
INTERACTIVE
“AstroAnimate let us delete an entire animation runtime and still ship motion our designers were proud of. It is the first library that respects how Astro actually works.”
“We rebuilt our marketing site on Astro and AstroAnimate in a weekend. The static-first story finally has motion that does not undermine it.”
“The accessibility defaults alone justified the switch. Reduced-motion is handled, focus order is intact, and nothing hydrates by surprise.”
04
Newsletter / waitlist capture
An inline email capture that swaps to a success state on submit (demo only). The same block also opens in a native <dialog>.
INTERACTIVE
Get release notes in your inbox
New components, breaking changes, and the occasional deep dive.
Join 4,200+ devs. No spam, unsubscribe anytime.
You’re on the list ✓. Demo only, no email was sent.
05
Video demo modal
A 16:9 thumbnail with a circular play button. Clicking opens a placeholder video frame in a native <dialog>.
INTERACTIVE
06
Customer case-study cards
A three-up grid: wordmark, a headline metric, a one-line summary, an industry chip, and a read-story link. Static (CSS hover).
EXAMPLE
Nebula
+38%conversions
Rebuilt the landing hero with CSS-first reveals and cut time-to-interactive in half.
SaaSRead story →
Driftwave
−92%animation JS
Replaced a 60KB motion runtime with zero-JS components across the marketing site.
AgencyRead story →
Lumen
100Lighthouse
Shipped scroll and transition motion while holding a perfect performance score.
DocsRead story →
07
Trust / guarantee bar
A row of four icon + label reassurances, the kind that sits just beside a final CTA. Static.
EXAMPLE
⚖MIT licensedFree, forever
00KB runtimeJS only when opt-in
♿AccessibleRespects reduced motion
◆Open sourceBuilt in public
// BLOG & CONTENT
Blog & content
The editorial building blocks (bylines, related reading, progress, filtering, and pull quotes)
that make up an AstroAnimate article and its surrounding blog index.
01
Author byline + bio card
A compact byline strip at the top of a post and a fuller author bio card to close it out.
EXAMPLE
AT
AstroAnimate TeamJun 18, 2026·7 min read·PERFORMANCE
A progress bar pinned to the top of a scroll container that fills as you read inside the box.
INTERACTIVE
Scroll this box to watch the bar fill. The progress is measured against this container’s scroll position, not the window’s.
Astro’s whole pitch is shipping less JavaScript. So the moment you reach for animation, there’s a tension: most motion libraries assume a hydrated, client-rendered tree.
The fix is to express the common cases (entry, reveal, and transition animations) in CSS and the Web Animations API, which run on statically rendered markup. No directive, no island, no runtime.
A typewriter heading or a fade-up on a hero doesn’t need a framework. With AstroAnimate it’s a single subpath import and a component, and it renders in a fully static build.
Some effects really do need a runtime: spring physics, gesture tracking, timeline orchestration. Those belong on an island, and only there.
The mental model: CSS-first for presentation motion, islands for interaction. Most sites are 90% the former.
Whatever approach you choose, honour prefers-reduced-motion. AstroAnimate does this automatically. When a visitor opts out, motion is minimised.
Motion and Astro’s performance goals aren’t at odds, as long as you let CSS do the ordinary work and save hydration for the parts that are genuinely interactive.
04
Tag / category filter
A chip row that live-filters the post list below by category. Click a chip to filter.
INTERACTIVE
Animating Astro Islands without hurting hydrationPERFORMANCE7 min
A field guide to scroll-triggered revealsGUIDE9 min
AstroAnimate 0.1.2: CountUp & easing presetsRELEASE3 min
prefers-reduced-motion, done properlyACCESSIBILITY5 min
Measuring animation cost in a static buildPERFORMANCE6 min
05
Trending / most-popular list
A ranked list with oversized numerals and an optional view-count meta line.
Numbered page controls with previous / next, an active page, and a truncation gap.
INTERACTIVE
03
Stepper / wizard progress
A horizontal step indicator for multi-step flows: completed, current, and upcoming states.
EXAMPLE
✓Account
2Project
3Plan
4Review
04
Segmented control
A compact pill toggle for switching between a few mutually exclusive views. Click a segment.
INTERACTIVE
Rendered preview of the component.
The source code, copy-ready.
Props, defaults, and usage notes.
05
Back-to-top button
A floating control that appears once the user scrolls down, then jumps them back up. Scroll the box.
INTERACTIVE
Scroll down inside this box…
The button fades in after you pass the first screen of content.
It anchors to the bottom-right of the scroll container.
Keep scrolling, almost there.
This is the end. Click the ↑ button to return to the top.
06
Sticky action bar
A persistent bottom bar (common on mobile) pairing a summary with the primary call to action. Click activate, then scroll the page area. It stays pinned to the bottom.
INTERACTIVE
This panel mimics a page. The action bar below sits fixed to the bottom of this frame…
…so it stays in view while the content behind it scrolls. Common for pricing pages, carts, and mobile CTAs.
Scroll down. The bar doesn’t move with the text.
It only takes over the bottom edge, never the whole screen.
Tap the ✕ on the bar to dismiss it.
Pro plan$12/mo · cancel anytime
07
Actions menu
A kebab / overflow menu that reveals contextual actions. Click the ⋯ to toggle it.