Focus components and templates

A deep charcoal glass rectangle with a softly revolving inner highlight and restrained metallic type.

A warm amber launch control with tactile depth, a soft aura, and a compact lightning icon.

A bright creation CTA framed by four corner dots and sequentially drawn dashed border segments.

A saturated blue CTA with a glass highlight and a continuous stream of floating light points.

A dark rectangle CTA whose label slides, blurs, and resolves into a crisp duplicate on hover.

A dark builder CTA with a rotating orange edge beam, drifting dot texture, and responsive glow.

A restrained metallic lesson control with a masked gradient edge, soft elevation, and arrow icon.

A glossy generate control with prismatic borders, animated lettering, and an illuminated sparkle icon.

A glass CTA with a revolving highlight, advisor portrait, and a glowing generative-action icon.

A compact graphite CTA that replaces its static edge with a rotating white border beam on hover.

A sunlit amber CTA with inset highlights, deep elevation, and a rising hover sheen.

The authored six-stop violet gradient pill with its inner highlight, cast glow, and trailing open ring.

The authored sibling pill with the same geometry, a blurred glass fill, and a hairline outline.

The selected Trochil request-access treatment: a restrained black technical rectangle with a fine lit edge and passing warm signal sheen.

The selected Attune primary action with a compact orange thermal gradient, inset highlight, grounded glow, and chevron.

The selected Tideform action: a square technical outline with tracked mono type, warm hover state, and a long directional arrow.

The selected Understory action with a violet capsule surface and an inset paper-toned circular arrow endcap.

The selected Meridian primary action rebuilt as a blue illuminated keycap with a physical base, LED, and pressed hover travel.

The selected Meridian secondary action using the same tactile keycap geometry in its graphite night-side treatment.

The selected Halvorsen action: the shared editorial arrow-pill structure recut as a bone-white capsule with a black inset arrow disc.

The compact Aster navigation action with a translucent smoke surface, masked crystalline edge, top sheen, and restrained hover lift.

The Aster primary CTA using the same glass material with a bordered inset chip and a directional arrow that advances on hover.

A tactile pre-order keycap with an ember spark, machined graphite cap, top-edge glow, bloom, price legend, and pressed hover travel.

An outlined seasonal CTA with a pale blossom edge, paired dots, pointer-positioned ink bloom, magnetic drift, and sliding duplicate label.

The Dark Glass rectangle reduced to a compact circle with its original charcoal surface, masked edge, and moving conic light.

The Launch rectangle's exact amber gradient, 4px base, soft aura, and 2px pressed state around a centered plus glyph.

The Dot Border rectangle's transparent face, blue hover fill, four moving corner dots, and sequential dashed frame around a mail glyph.

A compact icon-only play control with configurable finish, diameter, outline, and accessible label.

The original authored liquid-metal Sign up pill with its complete spectral field, bloom, pointer well, and faceted press ripple.

The exact liquid-metal WebGL field measured through a compact 56–72px circular plus control, preserving every original interaction and post-process pass.

A tactile liquid-chrome Sign Up control with a refractive spectral ring, crystal center, floating particles, and pointer-drawn light scratches.

A slowly turning sphere of interface references, built from 190 non-overlapping gallery plates with hover lift, focus dimming, and inertial drag rotation.

Fourteen sculpted app icons orbit through liquid glass, satin ceramic, and precision aluminum, with a macOS-inspired dock, direct focus, tactile hover, and inertial camera controls.