component 14 / 28WORKING
SC Golden Spiral
- type
- Code Component
- platform
- Framer
- last update
- read time
- 6–8 min
needs JavaScript
demo · runs with JavaScript
Generates N points using the golden angle π(3−√5) with radius proportional to √(i/N); dots render as <circle> elements with optional SVG <animate> pulses sweeping inside→outside (or reverse) and CSS rotation on the <svg>.
An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.
- Visual
- SVG
- Generative Math
Main
Overview
- Built With
- React, SVG, CSS, Framer Code Component API
- Layout Support
- Fully Responsive or fixed width/height
- Orientation
- Full Fill motif
- Ideal Use Case
- Ambient hero visuals, decorative backgrounds, brand motion textures
Tags
Code comment
/** * SC Golden Spiral * © SecretoCho Design 2025 * Golden-angle point layout with optional per-dot pulse and global rotation. * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any */Dependencies
- Technologies
- None (pure SVG/React)
- Notes
- No external libs; uses native SVG <animate> for per-dot motion.
Complexity
- Logic Level
- Low–Medium (deterministic geometry + simple animation)
- Runtime Cost
- Low–Medium (hundreds of SVG circles + optional anim)
- Component Size
- ~2–3 KB (raw TSX)
- Notes
- showFPS is debug-only; disable for production.
Guide
Instructions
- Add SCGoldenSpiral to your canvas; choose Size Mode = fixed (px) or dynamic (% of container).
- Set Points (e.g., 400–1200) and Dot Radius (1.5–3 for dense fields).
- Enable Pulse Effect to animate dot r and opacity; choose Duration, Min/Max Size, Min/Max Opacity, and Pulse Direction (inside or outside).
- Toggle Rotate for slow turntable motion; adjust Rotation Speed and Direction.
- Frame the motif via Anchor presets plus X/Y Offset.
Examples / Presets
Calm Aura
points=700 · r=2 · pulseEffect=on · duration=4 · size 0.8–1.25 · opacity 0.25–0.9 · rotate off
Hero Drift
points=900 · r=2 · pulseEffect=on · duration=3 · rotate on · speed=0.2 · dir=clockwise
Minimal Static
points=500 · r=1.5 · pulseEffect=off · rotate off
Mechanics
How it Works
- Golden-angle placement: For index i (0-based), uses idx=i+0.5, frac=idx/N, r=√(frac)*maxRadius, θ=idx*φ, φ=π(3−√5).
- Responsive sizing: maxRadius derives from the smaller of width/height; in dynamic mode it scales via Width%/Height% of the container.
- Pulsing: Each circle animates r and opacity with SVG <animate>, offset by its normalized frac. Direction flips phase (inside uses 1−frac).
- Rotation: A requestAnimationFrame loop increments a local rotation state; applied as transform: rotate(...) on the <svg>.
- Anchoring: Predefined anchors shift the cluster by ±¼ of the shorter side; X/Y Offset fine-tunes.
Performance & Tuning
- SVG handles hundreds of circles well; thousands plus pulsing is still reasonable on desktops.
- Prefer points ≤ 1200 on laptops; reduce dotRadius for density instead of adding excessive points.
- Keep duration ≥ 2s for smoother, less battery-intense motion.
- Disable showFPS when shipping.
Compatibility & Limits
- Evergreen browsers support SVG animation broadly; older iOS Safari may need testing for heavy <animate> counts.
- Rotation uses CSS transforms—GPU-friendly.
- No SSR output differences; geometry is computed at mount with current box size.
Quality
Accessibility
- Decorative by default; add aria-hidden="true" if it conveys no information.
- If used behind text, ensure adequate contrast and avoid excessive motion that could distract.
Security & Privacy
- No network, storage, or permissions.
- Only window resize listeners; they’re removed on unmount.
- No dangerouslySetInnerHTML or dynamic code execution.
Reference
Props
| name | type | default | description |
|---|---|---|---|
points | number | 600 | Number of dots in the spiral |
dotRadius | number | 2 | Base circle radius (px) |
duration | number | 3 | Pulse cycle duration (seconds) |
fillColor | string | #ffffff | Dot fill color |
pulseEffect | boolean | true | Enable SVG pulse animation |
opacityMin | number | 0.3 | Minimum opacity during pulse (0–1) |
opacityMax | number | 1 | Maximum opacity during pulse (0–1) |
sizeMin | number | 0.5 | Radius multiplier at pulse minimum |
sizeMax | number | 1.5 | Radius multiplier at pulse peak |
pulseDirection | enum | outside | Wave phase origin (inside/outside) |
sizeMode | enum | fixed | Spiral bounds mode (fixed px or dynamic %) |
ellipseWidth | number | 200 | Horizontal bound in px (fixed mode) |
ellipseHeight | number | 600 | Vertical bound in px (fixed mode) |
widthPercent | number | 12 | Horizontal bound as % of container (dynamic) |
heightPercent | number | 48 | Vertical bound as % of container (dynamic) |
positionAnchor | enum | center | Anchor for the spiral (center/top/bottom/left/right/corners) |
xOffset | number | 0 | Additional X translation (px) |
yOffset | number | 0 | Additional Y translation (px) |
showFPS | boolean | false | Show live FPS counter (debug only) |
rotate | boolean | false | Rotate the entire spiral group |
rotationDirection | enum | counter-clockwise | Rotation direction |
rotationSpeed | number | 0.2 | Angular step in degrees per animation frame |
Notes & Tips
- To bias density inward or outward, adjust dotRadius and points together; the √r distribution already spreads points evenly.
- For crisp aesthetics, keep fillColor opaque and modulate visibility via opacityMin/Max only.
Troubleshooting / FAQ
Looks off-center
Check Anchor + X/Y Offset; remember anchor shifts by ¼ of the shorter side.
Too busy/stuttery
Lower points, raise duration, or disable rotate.
Pulses feel chaotic
Reduce sizeMax and narrow opacity range (e.g., 0.35–0.8).
Source
Header comment
/** * SC Golden Spiral * © SecretoCho Design 2025 * Golden-angle point layout with optional per-dot pulse and global rotation. * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any */Key excerpt
The golden angle π(3−√5) and a radius of √(i/N): every point of the spiral is placed in this loop.
const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5))function generateSpiralPoints(N: number, maxRadius: number) { const points = [] for (let i = 0; i < N; i++) { const idx = i + 0.5 const frac = idx / N const r = Math.sqrt(frac) * maxRadius const theta = idx * GOLDEN_ANGLE const x = r * Math.cos(theta) const y = r * Math.sin(theta) points.push({ x, y, frac }) } return points}Credits
Credits
- Original animation: Filip Zrnzević — golden-angle (Fermat) spiral of SVG circles with phased <animate> pulses for radius and opacity.
- Framer/React adaptation: SecretoCho Design — responsive sizing (fixed/dynamic), anchor presets + X/Y offsets, global rotation, inside/outside pulse direction, property controls, and optional FPS overlay.
- Derivative work notice: This component is an adaptation of Filip Zrnzević’s original concept. Before commercial use or redistribution, review the original work’s license/terms and ensure proper attribution consistent with those terms.
- inspired by
- Filip Zrnzevic · codepen.io/filipz/pen/KwwKjxq
SecretoCho Design 2025
Disclaimer
- Derivative work notice: This component is an adaptation of Filip Zrnzević’s original concept. Before commercial use or redistribution, review the original work’s license/terms and ensure proper attribution consistent with those terms.
- Warranty: Provided “as is” for visual/UX purposes only. Validate performance, accessibility (motion/contrast), and compatibility in your target environments.
Proves
Hiring a design engineer?
I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.
sc@secretocho.design