DandyLine — Vault Renditions Exploration

Icon Version — Menu, Picker, List Row

✓ LOCKED · both states · ready to propagate

LOCKED — both variants serve a purpose. The unhaloed version is the default state (unselected). The haloed version is the selected / active state (when the user picks that vault in a picker, or when the icon represents the currently-open vault). The halo is how the UI communicates "this one is live." This gives every jar icon a built-in on/off state for buttons, pickers, and nav rows.

Default state — unselected · Tiny (28×36)

Pure silhouette + dot pattern. Used when the icon is just identifying the vault, not indicating the user has chosen it.

Selected state — active · Tiny (28×36) with halo

Halo on. Signals "this vault is currently selected, active, or the one you're inside." Same tight halo math (radius = min(W,H) × 0.62, center alpha 0.16, gentle pulse).

Default state — unselected · Compact (60×78)

Larger tap target for cards and tiles. Unhaloed means available but not chosen.

Selected state — active · Compact (60×78) with halo

The selected-vault state for pickers, hover hints, "you're inside this jar now" indicators, and any place where one of many vault icons is the chosen one.

Demo — selection cycling through vaults (Compact)

A simulated vault picker where one jar is "selected" at a time. The halo moves through the row every few seconds. This is how the state would read in a real vault chooser UI.

✓ Locked rules for icons:
  • Two states, both required: no halo = default/unselected · halo = selected/active. The halo is the state indicator. Every UI that renders a jar icon must support both.
  • When to use which: Unhaloed for lists, nav labels, vault-type identifiers, breadcrumb trails. Haloed for the currently-open vault, picker selections, hover/focus feedback, "you are here" signaling.
  • Sizes: Tiny (28×36) for buttons, nav bars, dense rows, inline "Plant into [jar]" pills. Compact (60×78) for cards, vault tiles, picker rows.
  • Halo math: radius = min(W,H) × 0.62 · center alpha 0.16 · gentle pulse (0.78 ± 0.20 sin t·0.55). Tightened so it stays close to the jar, no edge bleed.
  • Per-vault dot language: Grove = 3 orbiting · Personal = 1 centered · Milestone = 1 large pulsing · Legacy = 1 low + 2 layer lines · Journey = 6 ascending lighting path · Roots = 5 converging. Never swap or simplify.
  • Color: Jar color = vault color from Mix 6 · Halo tint = same vault color at low alpha.
  • Shape: Wayfinder octagon for Journey (not the old rectangle). All other shapes locked per product-vaults.html.

Vault Interior — The Screen You See First

step 1 of the experience flow

When you open a vault, this is what loads — the vault interior. Header, badge, contributor row, bloom CTA, all wrapped around the sealed animated jar. Each interior picks up its vault's color identity. This is the starting screen. The next step (Section 03) is what plays when you tap the jar to dive in.

Locked: the interior treatment, color matching across header/badge/CTA, gold-anchored bottom nav. Brief vault descriptions added per type. Tapping the jar in this screen plays the unsealing flow in Section 03.

Animated Jar + Unsealing Flow — What Plays When You Tap

step 2 of the experience flow · LOCKED jar

LOCKED: the dandelion realism (V2 stems, ripple rings, seed palettes), orb design, jar sizing, Wayfinder shape, Mix 6 colors. Below is the locked sealed-jar render for all six vaults — the resting state shown inside the Section 02 phones. Below that is the rebuilt Unsealing Flow: ONE continuous motion (no two-step feel), the dandelion is born from the jar's opening point as the lid lifts, and the whole thing eases into the deep dandelion close-up.

LOCKED — Animated Jar (sealed resting state)

The canonical jar render. This is what sits inside the Section 02 phone mockups. V2 dandelion, Mix 6 seeds, Wayfinder Journey, softened Roots glass.

Unsealing Flow — V3 (continuous: lid + dandelion move together)

Rebuilt as ONE continuous motion. Like air escaping the jar, the lid lifts and the dandelion is released at the same time on a single eased curve — no phases, no steps. The dandelion is "born" from the jar's opening point (so its boundaries never visually cross the jar walls), then grows and translates toward the close-up state. The jar fades behind as the dandelion takes center stage. Nine-second loop: closed → emerge → close-up hold → recede → close. This is the transition from Section 02 (vault interior) to the deep dandelion view.

Question for you: Does the unsealing flow now feel like ONE motion instead of two steps? The dandelion shouldn't visually overlap the jar walls anymore (it's born from the opening point and grows outward, rather than translating up from inside). Once this feels right, the next thing to build is the Deep Dandelion Close-Up — the destination state with active vs. inactive seeds, particles, and the full ux-roots-arrival.html treatment. That'll get added as Section 04 once you confirm this transition lands well.

Deep Dandelion Close-Up — The Destination

step 3 of the experience flow · where the jar disappears

This is where the unsealing in Section 03 lands. The jar has faded away entirely and you're now inside the dandelion — close-up, tappable, every seed visible. Adapted from ux-roots-arrival.html: 24 seeds arranged on a golden-ratio spread, 5 active (glowing vault-color orbs with ripple rings + upward-drifting particles), 19 inactive (thin gold→cream stems with cream tips — the seeds still waiting). Each vault's close-up is tinted with its own color. The golden center orb holds the puff together. Tap any glowing orb and the seed detail popup opens — shown as a sample overlay on Stella's Life Capsule.

Question for you: Does this feel like the right "destination" — what the user lands on after the unsealing transition? The 5-active / 19-inactive pattern comes directly from the ux-roots-arrival spec. The popup overlay on Stella's tile shows the seed detail treatment (from, title, emotion, countdown, bloom CTA). Next round I'll wire Section 03's unsealing to transition directly INTO this state — jar dissolves, dandelion settles into the close-up, the full flow becomes one continuous animation.

Other Vault Renditions Worth Building

ideas to flag, not yet built

Beyond the three rendition types above (icon, animated, full interior), there are a handful of other places a vault visual will need to exist across the product. Listed below as ideas you can react to. Star the ones you want me to build out next, archive the ones we don't need, or add new ones I haven't thought of.

Idea 01

Vault Shelf — the library view

Multiple jars sitting side by side on a "shelf" — a horizontal row showing all of a gardener's vaults at once. Like a real apothecary shelf or a bookshelf of jars. Each jar shows its own dot-language pattern + faint glow. Tap a jar to enter it. Could be the homepage of the Vaults tab, or the My Vaults dashboard.

Use case: Vaults tab home, vault picker, dashboard widgets

Idea 02

Inline Vault Pill — text + tiny jar

A small inline element used in body copy and flow steps: [icon-jar] Personal. Used in things like "Add to: 🫙 Personal" or "Planted into 🫙 Stella's Life Capsule." The tiny jar is the icon-version we just locked in Section 01, sized to inline text height.

Use case: planting flow, breadcrumbs, notification copy, settings

Idea 03

Empty State Jar — freshly created, no seeds

A vault before anything is planted. Glass + lid + faint inner glow, but no orbs and no dandelion. Empty but luminous, like a jar waiting to be filled. Should feel inviting, not lonely. Could pulse gently to suggest "ready for your first seed."

Use case: vault-just-created screen, onboarding, "your first vault" tutorial

Idea 04

Sealing Animation — closing the lid on a freshly planted seed

The reverse of unsealing. A new seed has just been planted; the lid lowers and locks down with a quiet golden flare around the seal. This is the "promise made" moment — the visual punctuation at the end of the planting flow. Ceremonial but quick (under 2 seconds).

Use case: end of planting flow, "your seed is sealed" confirmation

Idea 05

Single Seed Bloom — one orb leaves the jar

When ONE seed inside a vault blooms (not the whole vault), that single orb lifts free of the dandelion, drifts up through the lid, and opens into the bloom-reveal moment. The jar stays. The other seeds stay sealed. Only that one seed has reached its time. This is the most-used animation in the product — every bloom triggers it.

Use case: bloom notifications, seed-detail page, "your seed has bloomed"

Idea 06

Thumbnail / Avatar Form — circular crop

A vault rendered as a perfect circle — for spots where a square or round icon is required by the surrounding UI: avatars, profile pictures, share-card thumbnails, app icons within an iOS share sheet. The jar silhouette is centered inside a circular frame with the vault color as a soft ring.

Use case: contributor avatars, share previews, app icons, OG images

Idea 07

Held in Trust — Guardian state

A vault that's been left in a Guardian's care (Seed Keys system) needs a distinct visual state. Maybe: faint silver chain wrapping the jar, or a soft cool overlay over the normal jar render, or a small key icon on the lid. Should feel safekept, not locked-away. The Guardian sees it; they know it's not theirs to open until the trigger fires.

Use case: Guardian dashboard, posthumous delivery flows, trust handoff

Idea 08

Conversion / Type Change — vault morphs shape

When a vault converts from one type to another (e.g. Personal → Milestone), the jar visibly morphs from one silhouette to the next. The dandelion inside stays continuous, the seeds settle into the new shape. A subtle but meaningful animation that says "this vault grew up." Tied to the brand vocabulary: vaults are starting structures, not rigid boxes.

Use case: "convert this vault" settings flow, vault evolution stories

Idea 09

Group / Grove Stack — community vaults overlapped

For Grove and Roots vaults, a slight overlap layered jar visual showing "many people inside this one container." Could be three faint jars behind the main one, offset slightly, hinting at multiple voices. Distinct from the Vault Shelf which is a row of separate vaults — this is multiple presences inside one vault.

Use case: Grove vault hero, contributor count visualization

Idea 10

Compost State — a vault you've let go of

DandyLine vocabulary: "Press / Compost = Save / Delete." A composted vault doesn't disappear — it returns to the earth. Visually: jar tilts, fades, the orbs slowly drift down into the soil/rootline. Soft, intentional, never destructive. The user knows it's gone but they also know it became something else.

Use case: "compost this vault" confirmation, archive view, "what happened to" history

Question for you: Which of these ten do you want me to build out next? My instinct: Idea 05 (Single Seed Bloom) is the most product-critical because it's the most-used animation. Idea 03 (Empty State) is the second most important because it's the first impression of a brand-new vault. The rest are nice-to-haves until they become needed for a specific page. Tell me your priorities and I'll build them next round.