Glowing Effect
A gradient glow border overlay that can wrap any card shape. Customize thickness, radius, colors, and control spinning with speed/duration options.
A flexible glowing border overlay that works with cards of any shape or size. It renders two layers: a soft blurred glow and a crisp gradient stroke. Gradients can spin continuously or run for a set duration.
Behavior
- Wraps any parent container (
absolute inset-0overlay). - Renders a blurred glow layer behind and a sharp border on top.
- Gradient can rotate infinitely or for a finite
spinDuration. - Works with square, rectangular, and circular shapes.
Props
radius— corner radius (px). For circles, pass a very large number (e.g.999).thickness— stroke width of the sharp border (px).colors— array of hex values used as gradient stops.glowStrength— blur radius of the glow (px).spin— boolean to enable/disable rotation.spinSpeed— rotation speed (degrees per second).spinDuration— finite spin duration (s). If omitted, spins infinitely.onSpinEnd— callback fired after a finite spin finishes.className— extra classes for the overlay wrapper.
GlowingEffect on Square Card
Orbital Telemetry
Packet summary · Sector LEO-A
New Signals
142
Recurring Packets
086
Corrupted Frames
003
GlowingEffect on Rectangle Card
Interface Patterns
A curated set of animation blueprints for dashboards, lists, media and navigation.
- Frictionless hover affordances
- Scroll-linked micro-interactions
- Motion-safe defaults
GlowingEffect on Circle Card
Portal Hero Section
A gooey, pointer-following “portal” that reveals an image by masking multiple spring-driven circles; tweak the feel by adjusting spring stiffness, damping, mass, or circle sizes/count in the source.
Encryption Loader
Deterministic “hacker text” loader that reveals a string left-to-right while unrevealed cells keep scrambling. Supports optional loading dots, hover-to-restart, and timing controls for duration and glyphFps.