◣ Corner Brackets
the chosen direction · 12 animated variants · ▶ test eachSVG L-strokes that ink themselves on mount via stroke-dashoffset. Idle draws the top-left corner only; active draws all four. The lines arrive like a pen tracing each elbow.
Gradient-painted corner Ls that pop in with a 1.35→1 overshoot on mount. Idle snaps two corners (the top-left L); active snaps all four. A crisp punch-in, like a reticle locking.
Four child-span corner ticks that fly in from outside the box and settle into their elbows. Idle slides a single bottom-right tick; active slides all four corners home. Assembling-frame feel.
Gradient corner Ls that expand outward from the button's center on mount, the frame blooming into place. Idle expands the top-left pair; active expands all four. Scope-iris vibe.
Corner-L strokes that draw in one after another around the perimeter (TL→TR→BR→BL) so the eye follows a single sweep settling at the four elbows. Idle traces the top-left corner only; active traces all four in a clockwise relay.
Child-span corner ticks that flicker like a powering-on filament before holding steady; the active state adds a faint accent glow on the corners. Idle flickers the top two corners; active flickers all four to life. Neon-ignition feel.
Four SVG corner brackets fly in from outside and snap home with a quick overshoot. Idle locks 2 corners (TL+BR diagonal); active locks all 4 + a slow infinite breathe so the selected button feels armed.
Child-span corner ticks rotate in from a tilt and settle square. Idle lands the top-left L; active lands all four corners then runs a slow infinite breathe — the armed corners stay alive.
SVG corner brackets draw in via stroke-dashoffset, then a brighter accent stroke sweeps a glow along the active button's perimeter on a loop. Idle draws 2 corners dim; active draws all 4 and keeps sweeping.
Gradient corner Ls step inward in three discrete frames — a stop-motion march to position. Idle marches the top-left corner; active marches all four and finishes on a slow infinite breathe.
Nested corner brackets — an outer L and a tighter inner L per corner — stagger in (outer first, inner second). Idle shows a single outer pair; active shows the full double set with the inner brackets breathing.
Gradient corners slide in from off-edge while an SVG perimeter line traces around once. Idle slides 2 corners with no trace; active slides 4 and keeps a faint trace running the loop — a living perimeter on the selected button.
◣ Corner Brackets · Flicker
6 variants · ▶ test eachCorner Ls that stutter on and off at uneven intervals — a couple of failed ignitions before catching and holding steady, like a buzzing neon tube finding its current. Idle stutters the top-left corner; active brings all four to life with a faint accent glow.
Gradient corner Ls that bloom in with two or three quick brightness-and-scale pulses — the frame swelling then snapping to size, like an old tube warming its phosphors — before settling at full brightness. Idle pulses the top-left pair; active pulses all four.
Hard high-contrast blinks — corner Ls snapping fully on then fully off in rapid succession, the gaps stretching out as the strobe decays into a steady hold. Idle strobes the top-left corner; active strobes all four. No fades, only hard cuts.
Corner Ls that judder — kicking a few pixels off-axis with opacity dropouts, a digital tear — before snapping cleanly into alignment. Idle glitches the top-left corner; active glitches all four to a locked frame. Signal-corruption feel.
Corner Ls that breathe like a banked coal — a gentle, irregular opacity flutter that never fully extinguishes and never quite holds, looping endlessly on the active state. Idle glows one quiet top-left corner; active keeps all four warmly alive. Calm, ambient, infinite.
Corner Ls that flutter to life in a cool fluorescent stutter, while one stubborn corner lags and buzzes — catching late after the others have settled — until all four finally hold steady. Idle stutters the top-left corner; active lights all four with the bottom-right as the laggard.
◣ Corner Brackets · Neon sign
5 variants · ▶ test eachCorner Ls that hum on with a couple of faint flickers, then settle to an even, steady accent glow — a healthy tube finding its current and holding bright. Idle hums the top-left corner; active lights all four with a soft accent halo.
Three corner Ls strike clean and hold a steady glow while one stubborn corner stutters and gutters at half brightness — a tube with a failing electrode that never quite catches. Idle shows the dim top-left; active lights all four with the bottom-right left flickering, half-dead.
Corner Ls that cough through a few cold stutters and then BLOOM — the glow halo swelling from a thin filament to a saturated accent burn as the gas takes. Idle ignites the top-left corner; active fires all four, each blooming to a full halo. The bloom is the payoff.
Two concentric accent strokes per corner — a crisp inner L with a softer outer L offset just beyond it — building a layered, deep halo like a double-run neon sign. Idle shows the dim top-left pair; active lights all four corners with both tubes glowing.
Corner Ls that strike on and then never quite sit still — a continuous, low-amplitude buzz that ripples the glow ever so slightly, the way a live neon sign breathes against the dark. Idle holds the dim top-left; active keeps all four lit and gently buzzing, looping forever.
◣ Corner Brackets · Ember
5 variants · ▶ test eachCorner Ls that breathe as one slow banked coal — a soft, even opacity-and-glow swell that rises and settles on an unhurried infinite loop, never quite cold and never quite bright. Idle warms the quiet top-left corner; active keeps all four gently alive. Calm, ambient, restrained.
Corner Ls that hold a calm warm glow, then now and again throw a sharp, brief brightening — a coal popping and flaring for an instant before sinking back to its steady ember — on an infinite loop. Idle crackles the top-left corner; active crackles all four, lightly out of step. Mostly still, occasionally alive.
Corner Ls that trade warmth — one diagonal pair swelling bright while the other sinks low, then handing the glow back, the heat drifting across the frame on an infinite out-of-phase loop. Idle warms the lone top-left corner; active passes the ember between the two diagonals. Gentle, never both-dark.
Corner Ls that slowly fade toward going out — the warmth ebbing down to a near-dark coal — then catch a fresh breath and re-glow, the cycle repeating forever. Idle lets the top-left corner ebb and recover; active dims and re-kindles all four together. Slow, melancholy, never quite extinguished.
Corner Ls washed by a faint vertical heat wave — a soft band of extra brightness drifting top to bottom across the frame so the top corners warm an instant before the bottom, like air rippling over a coal — looping endlessly. Idle shimmers the top-left corner; active rolls the wave down all four. Subtle, liquid, warm.
◣ Corner Brackets · CRT power-on
5 variants · ▶ test eachEach corner L starts as a single bright horizontal scanline pinched to nothing, then stretches open vertically to its full height — the picture unrolling top-to-bottom as the tube energises. Idle reveals the top-left corner; active unrolls all four into an accent frame.
The corner Ls slam on far too bright — a white-hot accent surge as current floods the gun — then ease down through a couple of brightness ripples to a calm, normal glow. Idle surges the top-left corner; active surges all four before settling.
Each corner L is crushed into a single horizontal line at centre — the deflected-off picture — then springs open to full height with a tiny overshoot as the vertical sweep locks in. Idle pops the top-left corner; active snaps all four taut. The classic CRT power-down played backwards.
The corner Ls shimmer on with a degauss shudder — a quick horizontal jitter and scale wobble, like the demagnetiser pulse rippling the geometry — that damps out into a locked, steady frame. Idle wobbles the top-left corner; active settles all four after the shake.
The corner Ls bloom in trailing a soft phosphor after-glow — a wide accent halo that lingers behind the stroke and slowly bleeds away as the persistence fades to a crisp idle edge. Idle ghosts the top-left corner; active leaves all four glowing then cooling to a clean frame.
Minimal · hairline
Text-only, no chrome. Idle is dim ink; active simply lights up in the accent token. Nothing but the glyph carries the state.
1px theme-line box at rest, near-black fill. Active swaps the border + text to the accent token — same footprint, just a sharper edge.
Transparent ghost idle; active fills with the faint accent-soft token plus accent text. The wash reads as selection without a hard border.
Grey near-black tile at rest with dim ink; active lifts to the accent-soft fill and full nilla-text. A quiet tonal step-up rather than a colour pop.
Flat ghost idle; active grows a 2px accent underline (a bottom border in the accent token) and brightens the text. The tick is the only added mark.
Accent-forward · glow
Active = solid accent fill with black ink; idle stays a quiet ghost. Loudest read, zero ambiguity.
Active = accent border + soft accent box-shadow glow over near-black. Lit-from-within, never filled.
Active = a detached accent ring (offset glow gap) hovering off the black surface. Reads as selected without touching the border.
Active = a small breathing accent dot (animate-pulse) plus an accent border; the surface stays black. Live, telemetry feel.
Active = a black-to-accent-soft gradient wash with an accent top hairline. Filled energy without going fully solid.
Brutalist · hard
Sharp box with a 2px accent drop-shadow; active slams down into the shadow (translate + shadow collapses).
Thick stacked frame (outer line + inset accent ring via box-shadow); active floods the inset ring with accent.
Borderless near-black slab with accent L-brackets stamped in two corners; active fills all four corners + accent text.
Clipped top-right corner (industrial chamfer) on a hard 2px frame; active fills the slab with accent-soft + accent edge.
Heavy uppercase stamp on a thick frame with a 3px accent base bar; active insets (translate down) and the bar floods the face.
Soft · rounded
Fully rounded capsule. Idle reads as a faint outlined pill; active fills with translucent accent + accent-tinted ring and text.
Translucent near-black glass with backdrop-blur. Idle is a soft frosted panel; active warms with an accent-soft fill and accent text.
Calm rounded-lg tiles. Idle sits on near-black with dim ink; active swaps to a flat accent-soft tonal fill with accent text and no harsh border.
Gentle rounded-md squares with a faint inner ring. Idle is quiet near-black; active gains an accent ring (boxShadow) plus accent text while staying dark — premium and restrained.
Rounded-full capsule with a leading status dot. Idle dot is faint ink; active dot lights to full accent with a soft accent-tinted fill and accent text — the dot carries the state.
Structural
House accent-underline-tab style — active grows a 2px accent under-border; idle is flat and dim. The bottom edge carries the whole signal.
Active grows a 2px accent bar inset on the left edge over a near-black fill; idle is a quiet outline with no rail. The left margin is the tell.
Reads as one segmented control — a hairline-divided pill where the active cell lifts to a soft accent-wash fill; idle cells are flush and transparent.
Active lights an inset accent LED line across the top plus a faint accent box-shadow scanline glow; idle is dark with the LED off. Cockpit-instrument feel.
Active notches its top-right corner with an accent-wash clip plus an accent ring; idle is a square dark tile. The bevelled corner marks the selection.
Premium · depth
Frosted gradient face, hairline border, soft inner highlight. Active lifts on an accent glow.
Idle sits proud with a top highlight; active looks physically pressed via deep inset shadow.
Black face floated inside an accent-gradient hairline (padding-box vs border-box). Active fills the ring.
Refined type, generous tracking, borderless idle. Active is anchored by a thin accent underline rule.
Fine grid texture on the face. Active swaps to an accent-tinted matrix with a glowing border.
End · mock styles, no data