Animation Recipes

Scroll-driven reveals, pointer-tilt, and pinned sticky grids — all wired via data-sp-anim attributes. The HTML is identical to every other section above; only the attributes change. Disable JS or turn on Reduce Motion to confirm content stays visible.

Reveal on scroll

Pointer tilt on hover

Word-mask reveal

Words slide up from behind an invisible mask, one after another, as the block enters the viewport.

The recipe splits on whitespace, wraps each word in a clipping box, animates the inner span from below, then restores the original markup on dispose. Screen readers see the intact sentence via aria-label.

Scroll-mask reveal

A clip-path tween scrubbed to scroll progress. Put data-sp-anim="scrollMask" on any element (or a composition with a [data-sp-anim-role="mask-target"] child, like Feature) and it reveals as the block enters the viewport.

Typography scroll effects

Per-character and per-word reveals scrubbed to scroll progress. Distilled from the Codrops OnScrollTypographyAnimations demo into a family of individual recipes — each one tree-shakeable, each addressable directly via data-sp-anim="...". Available: charTumble, charZoom, charFlipTop, charFlipBottomRandom, charFanOut, charScatter, charScaleSlide, charElasticDrop, charScaleYPinned, charScaleYAlternatingPinned, wordFlyoutPinned, charBlurArc, charScaleCorner, wordFadeTilt.

Elastic grid scroll

A grid that reacts to scroll velocity — tiles stretch and skew as you fling the page, then elastically snap back to rest the moment you stop. Each tile has a slightly longer return duration than the last, so they settle in a staggered wave. One data-sp-anim="elasticGrid" on the wrapper; every direct child becomes a tile.

Throw the mouse wheel at it — notice how the top row snaps back first and the bottom row lingers. Tune maxSkew, maxStretch, stagger, and ease via data-sp-anim-opts.

Gooey cursor field

A CSS Grid of tiles overlays each surface. Mousemove lights the tile under the pointer with a short TTL fade; adjacent lit tiles merge through an SVG feGaussianBlur + feColorMatrix gooey filter. Click for a radial stagger ripple from the click point. Colors, blend mode, and tile shape are driven by inline --sp-cursor-* custom properties — one data-sp-anim="cursorField" drives every variant. Scroll through the full-viewport showcases below.

Features

Content Layout

Card Variants

Masonry Layout

Border Component

Carousel Component

Horizontal scroll-snap with native CSS pagination dots via ::scroll-marker — zero JavaScript.

Mask Component

Stack Component

SwiftUI-style HStack / VStack / ZStack via the direction prop. Pure flexbox for horizontal/vertical, single-cell grid for depth.

Atomic Utilities

Minimal, sp-* prefixed atomic classes — spacing scale 0–5 driven by --sp-space, flex/grid centering, z-index, text align, and size. Apply via className on any primitive.

Centering — sp-center

Grid centering — sp-place-center

Spacing scale — sp-p-{0–5}, sp-m-{0–5}

Directional — sp-mt-4, sp-pb-2, sp-mx-auto

Z-index — sp-z-{0,10,20,30}

Text align — sp-text-{left,center,right}

Flex row with gap — sp-flex sp-gap-3

Code Component

Inline variant flows with prose. Block variant renders a scrollable <pre><code> surface with an optional language label. Uses --sp-font-mono and global radius, border, and space tokens.

tsximport { Modal, Button } from "@seopages/ui";

export function ConfirmDelete() {
  return (
    <Modal id="confirm" size="sm">
      <Title as="h3">Delete this item?</Title>
      <Text>This cannot be undone.</Text>
      <ButtonGroup>
        <Button href="#!" variant="outline">Cancel</Button>
        <Button href="#!">Delete</Button>
      </ButtonGroup>
    </Modal>
  );
}

css.sp-card {
  background-color: var(--sp-color-surface);
  border-radius: var(--sp-radius);
  padding: var(--sp-space);
  font-family: var(--sp-font-body);
}

bashmake render-dev    # local Astro dev with .env.development
make render-deploy # build + push secrets + wrangler deploy

A plain block without a language label, with wrap enabled — long lines break instead of scrolling horizontally. Useful for prose-adjacent snippets where horizontal overflow would be disruptive to the reading flow.

Modal Component

Zero-JS <dialog> driven by :target. Open via a link to the modal's id, close via any link to a non-matching hash (default #!). Click the backdrop or the ✕ to dismiss.

Collapse Component

Native <details> / <summary> — zero JavaScript, keyboard accessible, theme tokens cascade (try the dark-mode toggle).

FAQ composition

Flat variant, composed content

Dropdown Component

Native <details> disclosure with compound subcomponents — Dropdown.Item, Dropdown.Action, Dropdown.Divider, Dropdown.Header. Honest disclosure semantics (no fake role="menu"), zero JavaScript. Sharing name across siblings makes opening one close the others.

Feature composition

A two-column block built from the Image, Title, Text, and Button primitives. Swap imagePosition between "left" and "right"; columns collapse to a single stack below the mobile breakpoint.

Image left

Ship pages without writing JavaScript

Every primitive in the library is a pure function from props to HTML. Compose them into sections, drop them in an Astro page, and let the edge cache do the rest.

Get startedRead the docs

Image right

Themeable down to the last pixel

Override any --sp-* token on a wrapper element and the whole composition retunes — no rebuild, no remount, no surprises in dark mode.

Explore tokensView source

Centered

One block, perfectly centered

Use imagePosition="top" or "bottom" for hero-style layouts. Content stacks above or below the image and aligns to the center.

Try it nowLearn more

Multiple images

Pass an array, get a gallery

The image prop accepts a single object or an array. Two images render as a 1×2 grid, three as a 1×3, four as a 2×2 — the layout adapts to the count.

See the API

Centered + multi

Centered headline above a triptych

Image grid sits below the centered content block, capped at the same stacked max width as the single-image variant.

Open mood board

Scroll-mask reveal

Unveil media as you scroll past it

Drop data-sp-anim="scrollMask" on the Feature root and its image reveals through an expanding clip-path scrubbed to scroll progress. Tune shape, from/to, radius, and start/end via data-sp-anim-opts — no component changes, no extra markup.

Copy the snippetRecipe source

Circular variant

Or reveal through a growing circle

Same recipe, shape:"circle" — the image opens from a small centered disc outward to cover the frame. Swap from / to percentages to tune how early the reveal starts and how much overshoot you want at the corners.

Tweak the optionsBack to top

Footer composition