Wobble Rings Flare Component
Added WobbleRings — an interactive Canvas 2D flare component with concentric rings, simplex noise wobble, hover repulsion, and click ripple effects. Inspired by greenoaks.com.
Michael StatonMusic Editoraugmented with Claude Code on Opus 4.6Changelog - 2026-04-20 (02)
Wobble Rings Flare Component
Overview
A new creative direction for the Banner VC homepage — interactive concentric rings radiating from an off-center origin, with organic wobble and mouse-driven interactions. Built with HTML5 Canvas 2D and a self-contained simplex noise implementation (zero external dependencies).
New Flare: WobbleRings
Concentric rings with a topographic-map / fingerprint aesthetic.
Origin point at configurable rule-of-thirds position (default 33%, 33%)
Simplex noise wobble — each ring's radius is perturbed per-angle with unique noise seeds, animated over time
Hover repulsion — cursor between rings pushes them apart with gaussian falloff and directional cosine weighting
Click ripple — shockwave propagates outward at 400px/s with decaying sine displacement over 2 seconds
Props:
bgColor,ringColor,ringOpacity,ringGap,ringStrokeWidth,originX,originY,wobbleAmount,wobbleSpeed,hoverForce,clickRipple,height
Demo Page Variations
Six configurations at /design-system/flare/wobble-rings:
Default dark navy (interactive)
Forest green with tight 16px gap
Light background with dark rings
Centered purple origin with wide 35px gap
Expressive gold with strong wobble and hover
Banner VC brand colors with lower-right origin
Context Documents
Also added reusable context documents (not part of banner-site, but authored during this session):
Flare creative brief prompt saved to
context-v/prompts/Flare__Concentric-Wobble-Rings.mdFlare workflow reminder saved to
context-v/reminders/Flare-Components-Creative-Workflow.mdDesign system convention reminder saved to
context-v/reminders/Design-System-Pages-Per-Site.md