A thread, a fold, a connection.
Paired arches form the symbol. Folded leaves represent small eligible rewards. Ribbons weave separate parts into a connected whole. None of their dimensions encode balances, percentages or investment performance.
Fraunces brings the expressive serif voice; Manrope handles the practical reading. Both are self-hosted. The downloadable brand kit contains outlined wordmarks, light and dark symbols, a monochrome mark, favicon, app and avatar assets, a social cover and font licenses.
Different thoughts need different pages.
The company page reads as a letter. The story is a continuous essay. A vertical thread connects the idea’s three moments. Tokenomics begins with the meaning of a reward and unfolds into rights, funding and open questions.
This library uses a compact reading directory, an inline contents list and a closing note. API fields are described in field notes; response cases are separate readings. Code captions appear below the example and can copy the text without executing it.
Templates live in src/layouts/; secondary-page styling is in src/styles/secondary.css. Shared financial vocabulary stays in src/content/brand.ts, and navigation lives in src/content/navigation.ts.
A change of light.
- Paper & shade
- Light background
#f4f0e7; dark background#172c25. - The words
- Light foreground
#243b2e; dark foreground#eee9dc. - The accent
- Light accent
#355540; dark accent#d4daa9.
The head script resolves morrow-theme before the page paints. A saved preference takes priority; otherwise the browser’s preferred color scheme is followed. Storage failure still permits a change on the current page.
The toggle updates the theme, browser color and accessible label. Supported View Transitions are brief; reduced-motion users receive an immediate change.
Let the movement explain the idea.
Scroll scenes introduce the reward, show the return relationship and bring separate leaves into a collection. The finale forms a broad canopy. It illustrates collection, not projected financial growth.
src/scripts/scenes.ts caches section geometry, schedules one animation frame per scroll update and moves fragments with transforms and opacity. Fonts loading and viewport changes refresh measurements. There is no permanent animation loop.
Mobile uses compact reading sequences and a shorter final pinned scene. Reduced motion removes pinning and large transformations. Without JavaScript, completed artwork, all explanatory text and the native signup form remain available.
The SVG compositions live in src/components/Artwork.astro. Shared theme tokens and homepage styling live in src/styles/identity.css.
Small movements, different roles.
The herbarium brings scattered leaves into an arranged collection. The vertical thread draws a path between the purchase, the company, the reward and its collection. A layered leaf study separates the reward metaphor from its actual financial terms. These compositions live in src/components/ExpandedScenes.astro.
The additional controller, src/scripts/choreography.ts, works from cached positions. It updates only scenes near the viewport, uses a single scheduled frame for each input update, and stops moving layers when reduced motion is requested. A ResizeObserver refreshes positions after changes to the height of the page. The completed static compositions remain the default when JavaScript is unavailable.