DandyLine — Dandelion Deep-Dive

01

Mark Anatomy

The dandelion mark is built from five distinct visual layers, drawn from center outward. Each layer has a defined role — remove any one and the sphere illusion collapses. The static mark uses 20 seeds; the animated motion mark uses 32 for smoother motion at larger sizes.

Motion Mark · Primary Brand Expression

A 20-seed puff drawn with depth simulation

Seeds sorted back-to-front by depth value, then painted in order — so closer seeds naturally cover the ones behind them. Back seeds are dimmer and shorter; front seeds brighter and fuller. The result is a sphere illusion built entirely from math, not from 3D geometry.

The motion mark is the primary brand expression for digital environments. Use for hero sections, onboarding, App Store listings, and launch materials. Never use in email or static exports — use the static full-color mark instead.

Center Orb

The glowing gold nucleus at the mark's heart. Rendered as a radial gradient from gold-lt to gold with a specular white highlight at top-left. Pulses gently in the animated version. Radius = 14% of the total mark radius (R × 0.14).

Stems

Curved lines radiating from the orb to each seed tip. Each is a quadratic bézier with the control point offset perpendicular to the stem direction — creating natural bow curves. Color transitions gold at base → cream at tip. Stroke weight scales with depth (0.5px → 1.6px).

Filaments

5-filament parachute tufts at each seed tip. The center filament is cream; flanking filaments fade to sky blue. Spread angle is 22° + depth×8°. Available only in Full and Mid rendering tiers — stripped in Micro to preserve legibility at tiny sizes.

Seed Orbs

Small glowing dots at the end of each stem. Size scales with depth: R × lerp(0.012, 0.036, depth) × 1.2. Front seeds have a specular shadow-blur glow (shadowBlur = R × 0.05). Color is always gold-lt — consistent regardless of seed state.

Halo Glow

A radial gradient centered on the orb, 2.8× the orb radius. Opacity 22% at center, fading to 0. Provides ambient warmth behind the mark without a hard edge. In the animated version it pulses with a sin wave at 1.1 Hz.

Floating Particles

Animated mark only. Mini seed shapes released from front seeds, floating upward with sinusoidal wobble. Each particle has its own decay rate (0.004–0.009 per frame), vx drift, and a 5-filament parachute. Maximum 8 active particles at once.

02

Depth Simulation

The 3D sphere illusion is created using the painter's algorithm — seeds are sorted by depth value (0.0 = back, 1.0 = front), then rendered back-to-front so closer seeds naturally overlap farther ones. No 3D engine, no Z-buffers — just sorted draw order and depth-scaled properties.

Depth Value → Visual Properties

Back seed

depth ≈ 0.2
opacity: 24%
stem weight: 0.6px
stem length: 62%R
seed orb: tiny, dim
no glow

Mid seed

depth ≈ 0.55
opacity: 56%
stem weight: 1.1px
stem length: 76%R
seed orb: medium
light glow

Front seed

depth ≈ 0.95
opacity: 88%
stem weight: 1.6px
stem length: 88%R
seed orb: full glow
shadowBlur active

The depth formula is: depth = 0.15 + 0.85 × fract(i × φ) where φ is the golden ratio — this distributes front and back seeds evenly around the full circle so no angular cluster forms. The painter's algorithm (back-to-front draw order) creates the 3D sphere illusion.

Depth-Scaled Property Reference

Property	Back (depth 0.0)	Front (depth 1.0)	Formula
Opacity	20%	88%	lerp(0.20, 0.88, depth)
Stem stroke	0.5px	1.6px	lerp(0.5, 1.6, depth)
Stem length	62% R	88% R	R × (0.62 + depth × 0.26)
Seed orb radius	1.0% R	3.6% R × 1.2	R × lerp(0.012, 0.036, depth) × 1.2
Filament spread	22°	30°	(22 + depth × 8)°
Shadow blur	none	R × 0.05	applied if depth > 0.5
Inner radius	14% R	14% R	fixed (R × 0.14) — all stems share same origin

In-Vault Mode · Orb Style

A different dandelion lives inside the vault

When the dandelion becomes a product interface — not a brand mark — seeds transform into glowing orbs. Each orb carries a timing color (gold, sky, purple, pink) and a lifecycle state (sealed, blooming soon, bloom now, bloomed). The filament anatomy you see above is the logo. Inside the vault, it's all about the orbs.

Explore the full seed system →

The brand mark (above) always uses gold/cream filaments. The in-vault dandelion uses the full seed color palette — gold for approaching, sky for patient, purple for distant, pink for love-tagged, sage for bloomed. See the Seeds Deep-Dive for the complete system.

03

Rendering Tiers

The static mark automatically switches detail level based on the rendered pixel size. Three tiers ensure the mark reads correctly at every size — from app icon down to favicon — without manual adjustment. The thresholds are baked into drawIcon().

Tier 1 · Full — 96px and above

128px

96px

Full Render

96px+

20 seeds. 5-filament parachutes on every seed. Full gradient stems transitioning gold → cream → cream. Specular glow on seed orbs (shadowBlur). Halo gradient behind the orb. This is the canonical mark and what appears in hero sections, App Store listing, and onboarding. All depth effects are fully visible at this scale.

Tier 2 · Mid — 28px to 64px

64px

48px

32px

Mid Render

28px – 64px

20 seeds retained. Filaments simplified — spread tightened and stroke weight reduced. Stem gradients simplified (less color stops). Shadow blur removed from seed orbs to prevent halos bleeding into adjacent seeds at close spacing. Still reads as the full mark. Good for nav icons, tab bars, thumbnails, and card headers.

Tier 3 · Micro — 20px and below

24px

20px

16px · min

Micro Render

≤ 20px

Reduced to 8 seeds — just enough to suggest the puff shape. Filaments removed entirely (too small to read). Orb remains prominent and glowing. At 16px — the absolute minimum — you should see a gold orb with 8 radiating dots. This is the favicon size. Do not use below 16px. The threshold check in the renderer is: if (R > 16) to render filaments.

04

The Motion Mark

The animated version uses 32 seeds — 12 more than the static mark — for smoother, denser sway at larger canvas sizes. Three animation systems run simultaneously: per-seed sway, jellyfish whole-body float, and stochastic particle release. All three are time-based (not frame-based) for consistent behavior regardless of display refresh rate.

Animation Systems

System	Description	Formula / Values
Per-seed Sway	Each seed oscillates around its base angle independently. Sway amount is 1.8°–4.6° (random per seed). Each seed has its own phase offset and speed — so they never move in sync. Creates organic, alive motion.	angle = baseAngle + swayAmt × sin(t × swaySpeed + swayPhase)
Jellyfish Float	The entire mark drifts as one unit — horizontal drift ±2px and vertical drift ±9px — using two overlapping sine waves at different frequencies. This is the "breathing" quality described in the brand ethos. Pace is slow enough that it feels like breathing, not vibration.	fx = 2 × sin(t × 0.28) / fy = 9 × sin(t × 0.42)
Particle Release	Every 1.8 seconds, there's a 65% chance a front-facing seed (depth > 0.5) releases a mini seed particle. Each particle has its own drift velocity, life decay, and sinusoidal wobble. Maximum 8 particles live at once. Particles fade out over ~3–4 seconds.	spawn: 1800ms interval × 0.65 prob / decay: 0.004–0.009/frame
Orb Pulse	The center orb radius pulses gently at 1.1 Hz — expanding and contracting between 88% and 112% of its base size. The glow halo pulses in sync. Creates the impression of a heartbeat.	pulse = 0.88 + 0.12 × sin(t × 1.1)
Main Stem	A single vertical stem below the orb represents the dandelion plant body. It sways gently with its own independent bézier curve control point, slightly out of phase from the body float.	Quadratic bézier: origin → (t × 0.4 + 1.2) offset CP → base

Static Mark · 20 seeds · Full render

No animation · Email · Print · Static exports

Motion Mark · 32 seeds · Animated

Hero sections · Onboarding · App Store · Launch

05

Atmosphere & Feel

The dandelion is not decoration — it's the primary metaphor for the product. Every animation decision was made to reinforce the brand's emotional register: patient, quiet, intentional. The motion should feel like breathing, not spinning.

Quiet

The jellyfish float is slow enough that you don't consciously notice it moving. Seeds sway independently — never in unison — so there's no rhythmic pulse drawing attention. The mark should feel present and alive but never demanding. If the motion catches your eye, it's too fast.

Hopeful

Seed particles releasing upward from the puff carry the product's core metaphor — memories drifting out into the future. The release is infrequent and gentle. The particles themselves are tiny, lit softly in gold-lt. They should feel like wishes made, not notifications.

Intentional

The sphere illusion communicates structure — these aren't random particles. Each seed has a position, a depth, a role. The depth simulation makes the puff feel organized and considered. It's not chaotic. It mirrors how DandyLine stores memories: intentionally placed, not dumped.

Breathing

The jellyfish float formula — two overlapping sine waves at inharmonic frequencies — creates motion that never perfectly repeats. This is the key to "breathing" quality: 9px vertical at 0.42Hz overlaid with 3px horizontal at 0.28Hz produces motion that feels organic because it avoids exact periodicity.

What NOT to Do

Don't	Why
Use the animated mark in emails or PDFs	Canvas doesn't render in static formats. Use the static full-color mark at 96px+ instead.
Speed up the sway or float animation	Faster motion loses the "breathing" quality and starts to feel nervous or urgent — opposite of the brand.
Use below 16px	At 14px and below, the orb and stems blur together. Minimum is 16px. At 16px use Micro tier only.
Recolor the mark for seasonal themes	The color treatments page (Logo & Marks) defines the 5 approved treatments. Outside those, the mark is always gold/cream on dark or gold-dk/navy on light.
Stretch or distort the mark's aspect ratio	The mark canvas is always 1:1 (square). Stretching breaks the sphere illusion immediately since depth depends on angular position in a circle.