Flower of Life Lab
A standalone interactive tool for exploring, designing, and composing sacred geometry. Built as a creative instrument, lead magnet, gift-with-purchase, and living demonstration of ECCO's technical capability.
Educational Tool
Teaches the sacred geometry progression from single circle through the full Flower of Life. Interactive staging lets users discover each phase.
Creative Instrument
10-layer system with per-layer stroke, opacity, glow controls. Drag-to-reorder paint order. Dual counter-rotating flowers. Clone & satellite presets.
Lead Magnet
Hosted at flowerlab.etherealconnectionsco.com. Captures attention, demonstrates capability, routes visitors back to the main portal.
Gift with Purchase
Bundled with any ECCO service tier. A tangible creative artifact clients can share. Shareable via encoded URL parameters.
Technical Showcase
Zero dependencies. Pure HTML/CSS/JS. Anchor-spinner animation pattern. Constellation particle system. Glass-morphism UI. Performance-aware rendering.
Circle Position Math
ViewBox: 0 0 100 100 | r = 20 | Center: (50, 50)
Ring 0: (50, 50) — center
Ring 1: 6 circles, distance = r = 20, angles 90° 30° 330° 270° 210° 150°
Ring 2: 6 circles, distance = 2r = 40, same angles
Ring 2 int: 6 circles, distance = r√3 ≈ 34.64, angles offset 30°
Enclosing: Inner ring r = 3R (60), Outer ring r = 3R + offset (63)
10-Layer Architecture
| Layer | Color | RGB | Purpose |
|---|---|---|---|
| Black 1 | 0, 0, 0 | Deep shadow / depth | |
| Black 2 | 0, 0, 0 | Secondary shadow | |
| Gray 1 | 140, 140, 140 | Mid-tone structure | |
| Gray 2 | 140, 140, 140 | Secondary mid-tone | |
| White 1 | 255, 255, 255 | Primary bright rings | |
| White 2 | 255, 255, 255 | Secondary bright | |
| Teal-Core 1 | 0, 240, 255 | Primary accent | |
| Teal-Core 2 | 0, 240, 255 | Secondary accent | |
| Teal-Dim 1 | 0, 168, 168 | Primary atmosphere | |
| Teal-Dim 2 | 0, 168, 168 | Secondary atmosphere |
Each layer: stroke weight, opacity, glow intensity, glow spread, independent glow color (can differ from stroke color), visibility toggle, drag-to-reorder (SVG paint order). The glow color picker enables effects like white strokes with teal drop-shadow glow — matching the website's nova-mode flower exactly.
Dual Flower System
CW + CCW counter-rotating flowers. Independent geometry, size, Y-offset, spin speed. Independent layer configs.
Clone & Duplicate
Snapshot any flower's layer config. Spawn copies with X/Y/Scale sliders. Delete individually or clear all.
Satellite Presets
One-click arrangements: Hex Ring, Orbital, Sacred Mirror, Random Scatter, Fibonacci Spiral.
Animation Controls
Pause/Play all, Reverse direction, Speed multiplier (0.1× – 5×). Applies to flowers + clones.
Nova Background Glow
Ambient radial gradient behind the flower with Core/Dim/Glow3 channels. Independent from per-layer drop-shadow glow which traces the stroke geometry.
Preset Library
Save/Load configs to localStorage. Share via encoded URL. Full JSON export of all values.
Active Palette — V1
Extended Spectrum — Future Layers
Full chromatic expansion. Each color becomes a layer pair (primary + secondary) with independent stroke, opacity, and glow controls.
Implementation Path
The layer system is already built for arbitrary RGB values — every layer gets its own {r, g, b} color object. Adding new spectrum layers means extending the LAYER_DEFS array. The control panel auto-generates per-layer UI for any number of entries. Performance scales linearly — each additional layer adds one SVG element per flower instance.
Adds to ECCO's delivery capability. Free or low-cost to evaluate. Test it, add to stack, document the use case.
Competitor, market signal, or buyer behavior indicator. Log it, use in sales rebuttal prep or content.
Guru slop, vibe automation, no compliance depth. Dismiss. Don't let it consume mental energy.
THE FLOWER LAB IS AN E — EQUIP ENTRY — A tool that directly strengthens ECCO's brand delivery and client engagement pipeline.
Flower Lab Feature Ledger
Anchor-Spinner Pattern (Proven)
.flower-anchor { position: fixed; top: 50%; left: 50%; width: 0; height: 0; }
.flower-spinner { position: absolute; width: Xpx; height: Xpx; top: -(X/2)px; left: -(X/2)px; }
Keyframes → PURE rotation. No translate. No transform centering.
CSS Animation Rules
- Keyframes must be PURE rotation — no translate
- Centering via anchor-spinner offset ONLY
- Never translate(-50%, -50%) in keyframes
- Never inline transform for centering
- Never style.cssText (Safari breaks)
- Never cloneNode() on SVGs (Safari breaks)
- All filter values: raw rgba, not var()
Performance Thresholds
- 10 layers + glow filters = moderate GPU
- Constellation canvas = CPU (particle math)
- 2014 MacBook: 3-4 flowers max
- Mac Mini M4: 15-20+ comfortable
- Perf mode: disables filters, throttles to 30fps
- will-change: transform on spinners
Safari on Big Sur Constraints
Capped at WebKit ~605. filter: drop-shadow() stacking unreliable. var() in keyframe filter functions fails. Chrome is primary dev/test target. "Best viewed in Chrome" notice recommended.