Rotating gradient borders, drawing corners, pulse rings, particle constellations and wires that connect real elements automatically.
Every edge, quietly alive.
The newest additions to the kit, rotating gradient borders, perpetual ambient loops, an interactive particle network, a sticky card deck, and flow-diagram wires that connect real HTML elements automatically.
A conic gradient spins around the edge via a double-background trick, the card keeps its own colour. .md-border (--mdb-bg to match the surface), .glow adds a soft halo.
Corner brackets draw in on view, then nudge outward on hover. .md-corners.
A brand-red glow beneath the element, breathing slowly. .md-underglow.breathe.
Rings emanate from the element's own edge, works on pills and dots alike. .md-ring (--ring-c, --ring-s).
Three quiet CSS-only loops, staggerable via --d: glow swell, pendulum sway, status blink. .md-breathe / .md-sway / .md-blink.
A phrase's fill sweeps through a moving gradient. .md-gradtext (--gt-c1/c2, --gt-dur).
We keep it protected and backed up all year round.
A translucent marker sweeps in behind a phrase, like a highlighter pen. .md-annotate.mark.
An interactive linked-particle canvas drifts behind content, cursor-linked on desktop. .md-constellation (data-count, data-link, data-color).
Scroll inside the box, each card sticks, and the next stacks over it. .md-deck > .md-deck-card.
Flow wires drawn automatically BETWEEN real HTML elements, no hand-coded SVG coordinates, re-routes on resize. .md-beams + data-beams="#a > #b".
Every effect here earns its place, calm, precise, and tuned to your brand, because motion should carry the message, never bury it.
Applied with restraint, tuned to your brand, and kind to every device, because motion should serve the message.