Interface & motion

A visual idea, carried through.

Offset brackets, modular planes and a tiled monogram make a purchase-to-collection sequence visible. The final scene assembles scattered pieces into the letter A. The geometry describes a concept. It does not encode balances, percentages or performance.

Barlow Condensed and Space Grotesk are self-hosted. The brand kit includes outlined wordmarks, light and dark symbols, a monochrome mark, a favicon, app and avatar assets, and a social cover.

Resolve the theme before painting.

An inline head script reads the saved afterbuy-theme preference. Without a valid saved choice, it follows prefers-color-scheme. The toggle updates the document, browser theme color and accessible label.

Supported View Transitions keep the switch brief. Reduced-motion users receive an immediate theme change. Storage failure does not prevent changing the current page’s theme.

Parts, movement and meaning.

The hero introduces the visual metaphor. Scroll scenes show where a reward comes from, how the relationship returns value and how separate rewards can form a collection.

src/scripts/scenes.ts caches section geometry and schedules one animation frame on scroll. Transforms and opacity move the fragments. Fonts loading and viewport resizing refresh the measurements. There is no permanent animation loop.

On small screens the main sequence becomes a compact illustrated reading order. The final scene retains a shorter pinned composition. prefers-reduced-motion removes pinned scrolling and large transformations, preserving the completed artwork and all text. Without JavaScript, the content, artwork and native signup form remain available.

Keep terminology and behavior aligned.

Shared financial vocabulary is defined in src/content/brand.ts. Navigation lives in src/content/navigation.ts. SVG compositions live in src/components/Artwork.astro; palette and visual styling live in src/styles/identity.css.

The technical atlas uses numbered chapters, a horizontal section index and a local contents rail. The company pages use annotated drawings, oversized questions and a decision register. Their shared visual rules live in src/styles/secondary.css.

These layouts maintain meaningful headings and native links. API examples are escaped text with a copy action; they do not execute. Success is shown only after the server confirms a stored signup.