H

Vijetbhat6/hoverlab/items

Files

CodeInfo

Abacus Count Loaderabacus-count-loader-15643Framed abacus whose beads slide along three rails one at a time, queueing against the far post before the whole row runs back to be counted again.

Accordion Photo Stripaccordion-photo-strip-15715Five narrow photo slices where the hovered one expands to more than three times its share and lights up while the rest dim, its caption rising from the bottom edge.

Achievement Toastachievement-toast-15179A game-style unlock toast with a round trophy badge that wobbles and a shimmer that sweeps across on hover.

Activity Rings Chartactivity-rings-chart-15251Three nested progress rings built from conic gradients and radial masks, with a colour-keyed legend showing each percentage.

Address Autocompleteaddress-autocomplete-15537Address field with a suggestion list hanging below it, each row giving the street on one line and the locality on the next.

Ambient Glow Bleedambient-glow-bleed-15853Now-playing card that lights itself: a second copy of the artwork sits behind the first under a heavy blur and a saturation boost, so the sleeve bleeds its own colour onto the card, spreading further on hover.

Anchored Popoveranchored-popover-15165A white popover with a caret pinned beneath its trigger button that springs downward and gains an accent ring on hover.

App Grid Menuapp-grid-menu-15409Nine-dot launcher button that springs open a grid of coloured app tiles anchored to its top-left corner.

Approval Chainapproval-chain-15521Sign-off chain of avatars along a line that changes colour as it passes each approver, the pending one pulsing amber.

Approval Request Alertapproval-request-alert-15459Review request notice showing who asked and what changed, with paired approve and request-changes actions along the foot.

Arc Toss Entrancearc-toss-entrance-15709Card chip lobbed along a parabola — steady sideways travel crossed with a rise and fall — that drops into a dashed slot and lights its outline on landing.

Arrow Rule Dividerarrow-rule-divider-15057A directional divider that starts from a glowing sky dot and ends in a solid arrowhead.

ASCII Rainascii-rainA noise field resolved as monospace glyphs, ordered by ink coverage, with per-column drops falling through it. Canvas 2D, so the ramp is a string you can edit.

Aurora Curtain Bandsaurora-curtain-bands-15389Blurred vertical ribbons of green and violet light that stretch and settle out of phase, like an aurora curtain over a dark horizon.

Aurora Veilaurora-veilThree drifting curtains of light with the vertical striation a real aurora has — the one background a blurred CSS gradient can never be mistaken for.

Autoplay Feature Tabsautoplay-feature-tabs-15467Vertical feature rail where the active row carries a progress line that fills on a timer before handing over to the next.

Autosave Draft Fieldautosave-draft-field-15837Draft editor with a blinking caret and a green saved stamp in its header that swaps for a spinning saving indicator the moment the field is touched.

Avatar Marquee Rowavatar-marquee-row-15719Band of member avatars that scrolls endlessly behind a soft fade at each edge, freezing under the pointer while every face grows and takes a blue rim.

Avatar Name Chipavatar-name-chip-15161Compact avatar-and-name pill that stretches on hover to reveal the person’s team beside their name.

Avatar Stack Tagavatar-stack-tag-15075Sky-blue tag with three overlapping avatars and a +N counter that fan apart on hover.

Award Rosetteaward-rosette-15597Pleated prize rosette with two notched ribbon tails, the fluted disc turning slightly when the badge is hovered.

Notification Pulse Badgebadge-pulseA pink badge with a cyan corner dot that emits an expanding ring continuously, signaling a live notification.

Status Dot Indicatorbadge-status-dotA small green dot with an outward-pulsing ring paired with a status label — common in dashboards for 'online' state.

Barcode Dividerbarcode-divider-15587Section rule drawn as a barcode of four bar widths on incommensurate spacings, faded out at both ends by a mask.

Basket Weave Ribbonsbasket-weave-ribbons-15669Horizontal and vertical ribbons crossing in a real over-under basket weave, the vertical strand masked in a checkerboard so it dives beneath the horizontal one at every other junction while the whole cloth creeps diagonally.

Battery Charge Iconbattery-charge-icon-15323Battery outline with one cell lit that charges cell by cell on hover and turns its casing green.

Aurora Backgroundbg-auroraTwo large blurred radial blobs drift independently across a near-black canvas, evoking northern lights.

Spinning Conic Gradientbg-conicA saturated conic wheel of seven colors that rotates continuously — striking as a hero panel backdrop.

Animated Gradientbg-gradientA four-color gradient that slowly pans its position to create a continuously morphing backdrop.

Animated Gridbg-gridA retro-tech glowing grid that pans diagonally over a radial vignette — Tron meets synthwave.

Mesh Gradientbg-meshA multi-point radial gradient mesh that gently shifts position, producing a soft aurora of color.

Floating Orbsbg-orbsThree blurred colored orbs drifting on a dark surface — great for hero section backdrops.

Starfield Backgroundbg-starsA repeating pattern of multi-color stars on a deep navy gradient that gently twinkles in opacity.

Billing Period Tabsbilling-period-tabs-15461Monthly and yearly segmented tabs with a sliding pill and a discount flag, the headline price crossfading as the period changes.

Blend Mode Rowblend-mode-row-15583Four identical swatches showing the same two discs composited under screen, overlay, colour-dodge and exclusion.

Blind Slat Revealblind-slat-reveal-15245Dark slats clipped with inset() cover half of a cyan panel; on hover they thin away in sequence like opening blinds.

Blinds Fill Buttonblinds-fill-button-14973Outline button whose background fills in as five vertical window blinds that widen until they meet.

Blinking Eye Iconblinking-eye-icon-15329An almond-shaped eye with a cyan iris whose lid slides shut when hovered.

Block Segment Rangeblock-segment-range-15311Range input with a track drawn as discrete orange blocks and a tall square thumb that fills in on hover.

Blue 3D Push Button (MD)blue-3d-push-button-md-4149Blue button with a solid extruded edge that compresses all the way down when pressed.

Blue Accent Alertblue-accent-alert-3905Inline alert with a blue accent rail and a tinted background wash.

Blue Accent Row Tableblue-accent-row-table-6811Borderless list table where hovering a row lights a blue bar down its left edge.

Blue Announcement Bannerblue-announcement-banner-6361Site-wide banner with a blue light sweeping along its top edge — attention without a modal.

Blue Bar Chartblue-bar-chart-4731Six-column blue bar chart; heights come from a --h custom property and grow in sequence.

Blue Blur-In Headingblue-blur-in-heading-5351Blue headline that resolves out of a blur while its tracking tightens — the current default for hero copy.

Blue Blur Scale Entranceblue-blur-scale-entrance-6051Element that resolves out of a blur while settling into place — softer than a plain fade-up, and the current house style.

Blue Blurred Pill Navblue-blurred-pill-nav-5659Sticky-header pill navigation on a blurred translucent bar, with a blue active state.

Blue Bottom Sheetblue-bottom-sheet-3807Mobile-style bottom sheet with a grab handle and a blue accent, sliding up from the edge.

Blue Bottom Tooltip (MD)blue-bottom-tooltip-md-2703Tooltip that scales in below the trigger with a blue outline.

Blue Breadcrumb Trailblue-breadcrumb-trail-5693Docs breadcrumb with CSS-drawn chevrons and a blue current page.

Blue Card Skeletonblue-card-skeleton-5993Full card placeholder — avatar, heading and three text lines — sweeping blue in one shared animation.

Blue Chevron Buttonsblue-chevron-buttons-7459Four directional chevrons drawn from two borders, in blue, with a lift on hover.

Blue Confirm Dialogblue-confirm-dialog-6303Destructive-action confirm with a blue ring, warning glyph, and a ghost/solid button pair.

Blue Corner Bracket Borderblue-corner-bracket-border-3379Two blue corner brackets that grow into a full frame on hover.

Blue Dashed Dividerblue-dashed-divider-2063Full-width dashed blue divider with a labeled section break.

Blue Details Accordionblue-details-accordion-4103Accessible <details> accordion — no JavaScript — with a blue plus icon that rotates into a cross.

Blue Develop On Hoverblue-develop-on-hover-7807Desaturated blue tile that regains color and pushes in when hovered.

Blue Dot Gridblue-dot-grid-4477Evenly spaced blue dot grid that drifts diagonally — a calm canvas background.

Blue Dotted Dividerblue-dotted-divider-2065Full-width dotted blue divider with a labeled section break.

Blue Draw-In Checkboxblue-draw-in-checkbox-5901Real <input type="checkbox"> styled with a blue fill and a checkmark that springs in — keyboard focus included.

Blue Edge-Fade Marqueeblue-edge-fade-marquee-4657Scrolling blue ticker whose ends dissolve into the background using mask-image.

Blue Equalizer Loaderblue-equalizer-loader-5133Five blue bars pumping out of phase — the compact "still working" indicator for inline use.

Blue Fade-Up Entrance (MD)blue-fade-up-entrance-md-2965Blue card that fades in while sliding up 20px on mount.

Blue Fading Dot Fieldblue-fading-dot-field-6575Blue dot field dissolved at the edges by a radial mask — the section background that never competes with the text on it.

Blue Fading Gridblue-fading-grid-5453The hero grid pattern: a blue rule grid dissolved at the edges by a radial mask so it never fights the content.

Blue Fill Sweep Textblue-fill-sweep-text-5385Muted type that floods with blue left-to-right on hover, by animating background-size behind clipped text.

Blue Film Grain Panelblue-film-grain-panel-6541Blue surface under animated film grain — hides gradient banding and adds the analog texture flat color lacks.

Blue Floating Label (MD)blue-floating-label-md-1576Blue input whose label floats above on focus or when filled.

Blue Focus Ring Fieldblue-focus-ring-field-5543Text field with a 3px blue focus ring and a label that lights via :focus-within. Keeps a visible focus state instead of removing it.

Blue Glass Buttonblue-glass-button-5017Translucent button lit from above, picking up a blue edge and halo on hover.

Blue Glow Avatar (MD)blue-glow-avatar-md-3639Initials avatar with a soft blue halo that widens on hover.

Blue Glow Field (Slate)blue-glow-field-slate-1374Slate background with two soft blue radial glows in opposite corners.

Blue Glow Text (MD)blue-glow-text-md-1166Blue text with a layered glow halo.

Blue Graph Paperblue-graph-paper-4559Blueprint grid with blue minor and major rules — four gradients, no images.

Blue iOS Switch (MD)blue-ios-switch-md-2357iOS-style toggle that slides a knob and lights up blue when on. Shown in both ON and OFF states with labels.

Blue Keycap Badgeblue-keycap-badge-5843Physical-looking keyboard shortcut caps that depress on hover and read blue when active.

Blue Labelled Dividerblue-labelled-divider-5727The "or continue with" rule: blue lines fading out from a centered label.

Blue Layered Depth Textblue-layered-depth-text-4293Stacked text-shadow layers give the headline a solid blue extrusion that deepens on hover.

Blue Lift Card (Slate)blue-lift-card-slate-0824Slate surface card with a blue top accent bar; lifts with colored shadow on hover.

Blue Live Status Pillblue-live-status-pill-3987Status pill with a blue dot that emits an expanding ping ring.

Blue Loading Buttonblue-loading-button-5075The pending state a submit button needs: blue tint, inline spinner, progress cursor.

Blue Marching Ants Borderblue-marching-ants-border-3345Dashed blue outline whose dashes crawl around the box — the classic dropzone cue.

Blue Neon Text (MD)blue-neon-text-md-4339Headline lit like a blue neon tube, with a slow hum in the brightness.

Blue Neon Tube Boxblue-neon-tube-box-4395Sign-style box with a blue tube border glowing inside and out.

Blue Outline Badge (MD)blue-outline-badge-md-2255Translucent blue outline pill badge in three example labels.

Blue Pill Nav (Slate)blue-pill-nav-slate-1855Slate pill nav with the active item highlighted in blue.

Blue Presence Avatarblue-presence-avatar-6221Blue avatar with an online dot that emits a ring — the presence pattern every collaborative app ships.

Blue Press Rippleblue-press-ripple-7613Material-style ripple that blooms from the center of a blue button on :active.

Blue Pulse Heartbeat (Norm)blue-pulse-heartbeat-norm-0664A blue disc that pulses in size and emits an expanding ring.

Blue Pulse Skeleton (MD)blue-pulse-skeleton-md-2819Blue-tinted skeleton bars that pulse opacity in sequence.

Blue Pulse Toggle (MD)blue-pulse-toggle-md-2519Round toggle whose blue knob glows and emits a halo when on. Shown in both states with labels.

Blue Range Sliderblue-range-slider-7273Range input with a blue track fill and a thumb that swells on hover.

Blue Rich Hover Cardblue-rich-hover-card-5959Profile preview popover with avatar, bio and stat, easing open from its top-left corner in blue.

Blue Ring Progressblue-ring-progress-3553Circular blue progress ring built from a single conic-gradient, with the value in the middle.

Blue Ring Radio Groupblue-ring-radio-group-6967Radio group whose selected dot pops into a blue ring — no JavaScript, pure :checked.

Blue Ring Spinner (Norm)blue-ring-spinner-norm-0490Classic norm rotating ring spinner in blue.

Blue Slide-Left Entrance (MD)blue-slide-left-entrance-md-3081Blue card that slides in from the left with a colored left border.

Blue Solid Badge (MD)blue-solid-badge-md-2153Solid blue pill badge in three example labels.

Blue Stat Tileblue-stat-tile-4813KPI tile with label, value, and a blue delta chip that lifts on hover.

Blue Status Badgeblue-status-badge-5785Status pill tinted with color-mix() from one blue value — change the base color and the fill and border follow.

Blue Striped Progress (MD)blue-striped-progress-md-3475Blue progress bar with diagonal stripes scrolling to signal ongoing work.

Blue Tick Checkboxblue-tick-checkbox-6933Custom checkbox that springs a white tick into a blue box, with a real focus ring.

Blue Top Tooltip (MD)blue-top-tooltip-md-2587Tooltip that fades in above the trigger with a blue arrow.

Blue Trend Rowsblue-trend-rows-6689Top-pages analytics list where each row's blue bar is the value — the density every dashboard sidebar needs.

Blue Underline Draw Linkblue-underline-draw-link-5419Inline link whose blue rule draws in from the left. Responds to keyboard focus as well as hover.

Blue Underline Tabsblue-underline-tabs-4021Tab row where a blue underline scales out from the center of the active item.

Blue Upload Dropzoneblue-upload-dropzone-5601Dashed blue dropzone that tints and lifts on hover, with a CSS-drawn upload arrow.

Blue Vertical Tabsblue-vertical-tabs-6395Settings-page sidebar tabs where a glowing blue marker grows out of the rail beside the active item.

Blue Vertical Timelineblue-vertical-timeline-4863Activity timeline with blue nodes; entries stagger in and the current step pulses.

Blueprint Frameblueprint-frame-15131Technical-drawing frame on faint graph lines with centre tick marks on each edge and crosshair corners.

Blueprint Spec Cardblueprint-spec-card-15653Drafting sheet on gridded blueprint paper with a hatched part and a title block, whose width and height dimension lines extend from their witness ticks and print their measurements when hovered.

Bounce-In Badgebounce-in-badge-15119Pill badge pops in with a springy overshoot, dips smaller and settles at its natural size.

Box Plot Rowsbox-plot-rows-15503Horizontal box-and-whisker rows showing the interquartile box against its full range, one row per percentile band.

Bracket Tabsbracket-tabs-15197Monospace tabs where a pair of fuchsia square brackets snaps around the checked tab label.

Branch Merge Dividerbranch-merge-divider-15867Section separator drawn as a merge in a commit graph: two coloured branch lines drop from their labelled tips, curve inward through rounded elbows and join at a pulsing node before continuing as a single grey trunk below.

Breakdown Popoverbreakdown-popover-15427Dashed-underlined total that opens an itemised popover of line charges and tax, with the grand total repeated at the foot.

Browser Folder Tabsbrowser-folder-tabs-15189Trapezoid browser-style tabs where the checked radio tab merges seamlessly into the indigo content pane below.

Brutalist Shadow Buttonbrutalist-shadow-button-14941Neo-brutalist button with a hard offset shadow that lifts on hover and collapses flat on press.

3D Push Buttonbtn-3dA chunky button with a solid drop-shadow base that compresses when pressed for a satisfying tactile feel.

Border Beam Buttonbtn-beamA dark button surrounded by a rotating conic-gradient beam that traces its border like a comet.

Border Draw Buttonbtn-border-drawMinimal text button whose top and bottom borders sweep in from opposite directions on hover.

Glow Trail Buttonbtn-glow-trailA deep-indigo button that ignites layered indigo glows on hover for an electric, almost magnetic presence.

Gradient Shift Buttonbtn-gradientA button whose multi-color gradient slides across on hover, paired with a soft drop shadow that intensifies.

Icon Slide Buttonbtn-icon-slideA warm amber button whose trailing arrow nudges right on hover, suggesting forward motion.

Liquid Wave Buttonbtn-liquidA teal wave rises from the bottom and floods the button on hover, with the text color flipping to white.

Neon Glow Buttonbtn-neonA bordered button with a soft cyan halo that fully ignites into a glowing pill on hover.

Pulse Ring Buttonbtn-pulseA pill button with two concentric rings that continuously pulse outward, calling attention without motion noise.

Shine Sweep Buttonbtn-shineA dark button with a skewed highlight band that sweeps across its surface on hover, like light catching glass.

Slide Fill Buttonbtn-slideA ghost button that fills from left to right with a solid color on hover, with the text color flipping in sync.

Bubble Chartbubble-chart-15509Scatter of translucent bubbles sized by a third measure, screen-blended over a faint plot grid so overlaps read as brighter.

Buffer Barbuffer-bar-15619Media scrubber showing three states in one track — played, buffered ahead and not yet loaded — with a knob that swells on hover.

Calendar Grid Skeletoncalendar-grid-skeleton-15113Month-view placeholder with a header, amber weekday ticks, a 7-by-4 grid of day cells and a highlighted today dot.

Callout Tail Framecallout-tail-frame-15891Tooltip outline whose pointer is a rotated square carrying two of the four border sides, its fill blanking the panel stroke behind it so the hairline runs unbroken into the tail — which slides the length of the edge on hover.

Caption Slide Cardcaption-slide-card-15001A media card where only the title peeks up from the bottom until hover slides the full caption into view.

Carbon Fiber Weavecarbon-fiber-weave-15231Dark carbon-fiber weave texture from offset radial dots with a faint highlight, tagged with an emerald label.

Card Declined Alertcard-declined-alert-15735Payment failure notice built around a miniature credit card with a stripe, chip and rejection badge, the card flinching every few seconds as if the reader pushed it back.

Card Fan Carouselcard-fan-carousel-15777Five slides held like a hand of cards, pivoting about a point below the deck so they spread wide and brighten on hover while the middle card lifts clear.

3D Flip Cardcard-flipA card that rotates 180° on the Y axis when hovered, revealing a different face on the back.

Card Flip CVC Fieldcard-flip-cvc-field-15673A payment form whose card preview turns a half rotation onto its magnetic-stripe back the moment the security-code field is reached, so the number you are being asked for is the one facing you.

Glassmorphism Cardcard-glassA frosted glass card with backdrop blur sitting over a colorful gradient plate — the classic iOS-style material.

Glow Pulse Cardcard-glowAn indigo card that breathes — its outer glow softly expands and contracts on a steady loop, calling attention without motion noise.

Gradient Border Cardcard-grad-borderA dark card framed by an animated four-color gradient ring that continuously morphs via a mask trick.

Hover Lift Cardcard-liftA gradient card that rises on hover with an intensifying colored shadow for a tactile floating effect.

Neumorphism Cardcard-neuA soft extruded card with dual light/dark shadows that invert into an inset on hover for a pressed feel.

Spotlight Cardcard-spotlightA dark card where a cyan spotlight follows the cursor, revealing the surface only where you point. (Move your mouse over it.)

3D Tilt Cardcard-tiltA violet gradient card that tilts in 3D space on hover, with title and subtitle lifted at different depths.

Cascading Submenu Popovercascading-submenu-popover-15699Context menu laid over a page whose chevroned row unfolds a second panel sideways, the flyout sliding out from under its parent as the pointer arrives.

Cassette Tape Cardcassette-tape-card-15655Compact cassette with a written label and a window onto two spoked hubs that turn continuously while the wound tape thickens on one reel and thins on the other.

Chamfered Corner Borderchamfered-corner-border-15139Octagonal panel whose bevelled corners keep a crisp gradient rim by nesting two matching clip-paths.

Chat Bubbles Skeletonchat-bubbles-skeleton-15107Messaging placeholder with alternating grey and sky-tinted chat bubbles that shimmer in sequence.

Custom Checkboxcheck-customA native checkbox restyled with appearance:none — fills with indigo and draws an animated checkmark when checked.

Checkout Summary Skeletoncheckout-summary-skeleton-15601Order summary placeholder with three charge rows, a dashed rule, a heavier total line and a full-width action block.

Chevron Breadcrumb Stepschevron-breadcrumb-steps-15263Arrow-shaped step chips that nest into one another like a breadcrumb trail and highlight on hover.

Chevron Path Tagschevron-path-tags-15871Location tags cut with a chevron point on one end and a matching notch on the other so they interlock into a single path strip, and pointing at any segment lights it and every segment leading up to it in blue.

Chevron Track Meterchevron-track-meter-15143A row of arrow-shaped chevrons filled left to right, with two more lighting up on hover to preview the next step.

Chip Dismiss Previewchip-dismiss-preview-15343Hovering the remove button on a tag chip previews the deletion by striking the label, tinting it red and shrinking the chip.

Circled Textcircled-text-15015A word that gets a hand-drawn ellipse sketched around it in a single looping stroke on hover.

Circuit Trace Boardcircuit-trace-board-15665A printed-circuit field of right-angle copper traces, solder pads and a pinned chip, with bright current pulses that run each trace and stop on the pad at its end.

Circuit Trace Loadercircuit-trace-loader-15647A glowing packet runs the rectangular copper trace of a small board, turning each corner in sequence around the chip package sitting at the centre.

Clap Counter Bumpclap-counter-bump-15339A Medium-style clap button where the hands bounce and a lime +1 badge floats up on hover.

Code Block Skeletoncode-block-skeleton-15105Mini editor placeholder with indented shimmering token bars, keyword bars tinted indigo.

Code Snippet Tabscode-snippet-tabs-15463Package-manager tabs sitting on top of a terminal pane, the active tab merging into the code surface below it.

Coffee Steam Iconcoffee-steam-icon-15561Line-drawn mug of coffee with three wisps of steam rising and skewing away on staggered delays.

Cohort Gridcohort-grid-15511Retention cohort table where each signup month is a row and colour intensity falls off week by week across it.

Coin Flip Loadercoin-flip-loader-14991A gold coin with two different faces spins continuously around its vertical axis.

Color Dodge Foil Tiltcolor-dodge-foil-tilt-15855Collector card finished in holographic foil: blurred rainbow stripes composited in color-dodge over the dark stock with a hard-light sheen above them, both sliding the other way as the card is hovered so the foil appears to tilt.

Color Picker Popovercolor-picker-popover-15097A fuchsia swatch button with an attached picker popover showing a saturation area, hue rail and hex readout.

Colour Swatch Radioscolour-swatch-radios-15293Radio group of colour swatch dots where the checked swatch grows an offset ring and a tick.

Column Rule Dividercolumn-rule-divider-15865A separator that is not an element at all: text flowing through a two-column layout is split by its own column-rule down the gutter, pinned at the middle by a small diamond node that turns and lights up with the rule on hover.

Column Spotlight Gridcolumn-spotlight-grid-15281Pricing comparison grid that highlights an entire column, not just a row, when any cell in it is hovered.

Comet Tail Dividercomet-tail-divider-15063A rule that thickens and brightens toward a glowing amber head, like a comet streaking across the page.

Comic Bubble Tooltipcomic-bubble-tooltip-15093Comic-book speech bubble with a hard offset shadow floating over a chunky amber icon button.

Compare Split Imagecompare-split-image-15713Before-and-after frame split by a draggable-looking divider that travels right on hover, wiping the flat ungraded shot away to expose the colour-graded version underneath.

Compare Wipe Tilecompare-wipe-tile-15675Two versions of the same layout stacked in one frame with a draggable-looking divider between them, which sweeps to the left edge on hover and wipes the greyed-out before state off the finished design.

Composition Barcomposition-bar-15259A single stacked 100% bar split into indigo-tinted segments with a header total and a colour-keyed legend of percentages.

Concentric Squaresconcentric-squares-15487Op-art squares nesting outward in deepening violet, drawn entirely from spreading box shadows and turning as they breathe.

Conditional Fieldsetconditional-fieldset-15547Checkbox that unrolls a hidden group of fields beneath it, the extra inputs staying out of the layout until they are needed.

Confetti Sprinkleconfetti-sprinkle-15489Sixteen coloured paper flecks scattered at unrepeating angles across a dark ground, for a celebratory surface texture.

Cookie Consent Overlaycookie-consent-overlay-15721Dimmed page with a consent bar pinned across its foot that grows upward on hover to unfold three category switches above the accept action.

Copy Fieldcopy-field-15401Read-only key field with a trailing button whose label rolls up to a green confirmation while it is held.

Copy Hint Tooltipcopy-hint-tooltip-15421Command token whose tooltip reads "click to copy" on hover and swaps for a green confirmation while the press is held.

Corner Bracket Buttoncorner-bracket-button-14945Crosshair-style corner brackets that extend into a complete frame around the label on hover.

Corrugated Sheetcorrugated-sheet-15765A galvanised corrugated sheet where each ridge is shaded from trough to highlight and back, with a row of dark rivets pinned along the top and bottom edges.

Counter Carouselcounter-carousel-15555Slide panel headed by a large position counter, with a thin fill bar and paired arrows sharing the footer.

Counter Ring Fieldcounter-ring-field-15397Text field with a conic character-budget ring in the trailing slot, filling further as the field takes focus.

Cover Banner Avatarcover-banner-avatar-15443Profile header with a gradient cover that shifts on hover while the circular avatar straddling its edge lifts and grows.

Crop Frame Imagecrop-frame-image-15717Photo under a crop tool: corner handles and rule-of-thirds guides frame a square selection that stretches to a widescreen box on hover while the pixel readout swaps beneath it.

Cross Hatch Patterncross-hatch-pattern-15229Lime cross-hatched pen strokes at 45 degrees; the weave tightens as the tiles shrink on hover.

Cube Face Carouselcube-face-carousel-15315A 3D cube that rotates to show the face selected by the dot navigation, using radio inputs and no JavaScript.

Cube Face Navcube-face-nav-15683A menu printed on the four sides of a solid cube standing on a lit floor, which turns a full quarter on hover so the next section swings round to face you and the current one rotates away.

Cut Line Dividercut-line-divider-15589Dashed cut-here rule interrupted by a pair of scissors whose blades open a little wider when the divider is hovered.

Day Night Switchday-night-switch-15849Theme toggle where the amber sun travels across the track, cools to pale grey and has a bite taken out of it by an offset disc so it lands as a crescent moon over a sky that has meanwhile filled with stars.

Delete Bin Hoverdelete-bin-hover-15567List row whose bin icon tips its lid open and turns red as the row is hovered, the can squashing when pressed.

Deploy Pipeline Toastdeploy-pipeline-toast-15729Toast that carries a three-stage pipeline along its foot, the connecting rail filling from left to right and each stage node lighting cyan as the deploy reaches it.

Diagonal Scan Sweepdiagonal-scan-sweep-15393Hatched dark field crossed at an angle by a soft blue scanning bar that fades in at one edge and out at the other.

Diagonal Stripe Skeletondiagonal-stripe-skeleton-15115Card placeholder filled with slowly marching teal barber-pole stripes instead of a shimmer sweep.

Diamond Lattice Tilediamond-lattice-tile-15025Offset diagonal facets crossed by fine violet seams form a faceted diamond lattice.

Diamond Platediamond-plate-15491Brushed metal tread plate with raised diamond studs picked out by paired highlight and shadow gradients.

Diamond Reveal Griddiamond-reveal-grid-15237A grid of indigo tiles clipped to diamonds that expand into full squares on hover, revealing the whole surface.

Die-Cut Sticker Tagdie-cut-sticker-tag-15077Lime sticker with a white die-cut border, slapped on at an angle, that springs upright on hover.

Diff Tablediff-table-15529Change log rendered as a diff, added rows tinted green with a plus and removed rows struck through in red.

Difference Stripe Textdifference-stripe-text-15579Heading set in difference blend over a drifting stripe field, so each letter inverts whatever band it happens to cross.

Directory Avatar Tabledirectory-avatar-table-15825Member list whose first column packs an initials disc beside a name stacked over its email address, with the role carried as a pill on the right and the owner pill tinted.

Disclosure Tree Navdisclosure-tree-nav-15687A file tree with indent guide lines down each branch, where the collapsed folder turns its caret a quarter and rolls its children open along the guide while the tree grows to make room.

Dither Gradientdither-gradientA two-tone field resolved by an 8x8 Bayer matrix — the 1-bit look, with the dither grid pinned to layout pixels so it survives a retina screen.

Animated Marching Dashesdivider-dashesA green dashed line whose segments appear to march continuously to the right via background-position animation.

Gradient Dividerdivider-gradientA horizontal hairline that fades in from both ends with an indigo-to-pink gradient — elegant for section breaks.

Wavy Dotted Dividerdivider-waveA row of evenly-spaced amber dots forming a soft wavy line — playful and lightweight.

DNA Helixdna-helix-15745Stack of gradient rungs all turning about one vertical axis on a staggered offset, so the column reads as a double helix winding endlessly through the frame.

Dog-Ear Carddog-ear-card-15373Note card with its top-right corner turned down to a coloured underside, the fold growing larger as the card lifts on hover.

Dog-Eared Framedog-eared-frame-15887Outlined note whose bottom-right corner is folded back, the flap painting over the frame so the diagonal becomes the new hairline edge, and peeling further open on hover.

Domino Fall Loaderdomino-fall-loader-15365Row of upright bars that tip over one after another along a floor line, then stand back up to run again.

Dot Expand Buttondot-expand-button-14949A small recording dot inflates to flood the whole pill with color on hover.

Dot Matrix Textdot-matrix-text-15385Heading rendered as an amber LED dot screen, the dot grid drifting slowly downward inside the letterforms.

Double Frame Buttondouble-frame-button-14965Gallery-frame button with a second outline ring that pushes outward on hover and snaps in on press.

Download Tray Icondownload-tray-icon-15557Download glyph whose arrow drops into the tray on hover while the tray itself lights up to catch it.

Drawer Label Tooltipdrawer-label-tooltip-15103Round emerald plus button whose label slides out sideways from behind it like a drawer on hover.

Drawer Toggle Navdrawer-toggle-nav-15405Hamburger button that morphs into a close icon while sliding a navigation drawer in from the left, driven entirely by a checkbox.

Drop Shadow Star Cutoutdrop-shadow-star-cutout-15353A clip-path star whose shadow hugs its points thanks to the drop-shadow filter, lifting with a pink glow on hover.

Drop Zone Overlaydrop-zone-overlay-15725Attachment list that blurs behind a dashed upload veil when files are dragged over it, the veil scaling up around a bobbing arrow and its size limits.

Drum Wheel Picker Fielddrum-wheel-picker-field-15679A value picker whose options are pasted around a real cylinder in three dimensions, curving away above and below the selection band and rolling one notch to the next value on hover.

Dual Row Marqueedual-row-marquee-15553Two pill belts scrolling in opposite directions at different speeds, both faded out at the edges by a gradient mask.

Dumbbell Chartdumbbell-chart-15257Dumbbell range chart: each row joins a grey start dot to an emerald end dot with a gradient bar, showing year-over-year change.

Echo Ring Buttonecho-ring-button-14977Pill button that emits two outline echoes rippling outward and fading when hovered.

Edge Spill Paneledge-spill-panel-15481Dark panel with a blurred colour bar hidden behind its lower edge, spilling light out around it and breathing slowly.

Ellipsis Text Tooltipellipsis-text-tooltip-15099A truncated filename that reveals its full text in a teal tooltip when hovered.

Emoji Rating Facesemoji-rating-faces-15569Row of grey faces that regain colour and jump forward under the cursor, the chosen one keeping a tinted disc behind it.

Enamel Pin Badgeenamel-pin-badge-15595Hard enamel pill inside a raised gold rim, with a gloss highlight that travels across the face every few seconds.

Envelope Open Iconenvelope-open-icon-15321A CSS envelope whose flap folds back and a lined letter slides up out of it on hover.

Error Summary Alerterror-summary-alert-15455Validation roll-up counting the problems in a form and listing each one as a link back to the field that caused it.

Error Summary Panelerror-summary-panel-15835Red summary block counting the form errors above the fields themselves, where hovering one of the listed messages rings the field it belongs to and reddens its label.

Error Trace Alerterror-trace-alert-15183A rose error alert built on a details element that expands to reveal a compact stack trace when clicked.

Estimated Checklistestimated-checklist-15515Setup checklist where each step carries its own time estimate and the running step spins a partial ring instead of a tick.

Expanding Detail Cardexpanding-detail-card-15377Service card that keeps its action row rolled away until hover, when the footer unrolls to reveal three controls.

Expanding Icon Tabsexpanding-icon-tabs-15193A cyan pill tab bar of icons where the checked tab unrolls a text label beside its glyph while the others stay compact.

Expanding Panel Carouselexpanding-panel-carousel-15313Four vertical strips where the selected panel expands to reveal its caption, driven by hidden radios with no JavaScript.

Expanding Sidebar Railexpanding-sidebar-rail-15411Narrow icon rail that widens on hover to bring its labels in from the left, keeping the active row highlighted throughout.

Eye Visibility Toggleeye-visibility-toggle-15091Show/hide password toggle where a closed eyelid opens and an indigo pupil pops in when checked.

Fan Stack Buttonfan-stack-button-14983A button sitting on a stack of colored sheets that fan out behind it like a hand of cards on hover.

FerrofluidferrofluidA metaball field whose blobs grow spikes along the field lines, faded in toward the surface so the cores stay round. Almost entirely specular, like the real material.

Fibre Patch Panelfibre-patch-panel-15753Four dark fibre channels between lit ports, each carrying a bright packet of light from the source port to the far one, which flares white as the packet lands.

Film Grain Overlayfilm-grain-overlay-15349An SVG turbulence noise texture blended in overlay mode over an orange gradient, growing coarser on hover.

Film Strip Maskfilm-strip-mask-15497Frame strip with sprocket holes punched along both edges by a repeating radial mask, each frame brightening on hover.

Filter Chip Setfilter-chip-set-15873Set of chips that carry their own state: a checked chip flips to solid sky and slides a tick out from its left edge, and the moment any chip in the set is checked a Clear link widens into being at the end of the row.

Filter Toolbar Tablefilter-toolbar-table-15531Data grid topped by a filter bar where each active constraint sits as a removable chip beside the search box.

Firefly Fieldfirefly-field-15483Warm motes drifting over a dark clearing, each fading up and down on its own timing so the field never repeats.

Flight Itinerary Stepsflight-itinerary-steps-15805Departure and arrival airports at either end of a dashed route, with a plane marker that flies the length of the path on hover and the flight details ruled off underneath.

Flip Avatarflip-avatar-15157Circular avatar showing initials that flips over in 3D on hover to reveal the name and role on its back.

Flip Clockflip-clock-15469Split-flap digit cards whose top half hinges forward on its axis and falls out of sight, the way a station clock turns over.

Flip Reveal Cardflip-reveal-card-14997A card that rotates around its vertical axis on hover to show a solid-colored back face.

Floating Card Rowsfloating-card-rows-15275Invoice table whose rows are spaced apart as rounded cards that light their border and nudge on hover.

Floating Label Fieldfloating-label-field-15285Text field whose placeholder label shrinks and floats to the top edge on focus or when a value is entered.

Floating Mini Playerfloating-mini-player-15171A picture-in-picture video overlay docked in the corner of a page that swells toward the cursor and advances its progress bar on hover.

Flow Sankeyflow-sankey-15505Two source bands feeding three destinations through tapered gradient ribbons, the others dimming as one flow is hovered.

Flyout Submenuflyout-submenu-15407Menu row with a chevron that opens a second-level panel alongside it, sliding in from behind the parent on hover.

Focus Pull Blurfocus-pull-blur-15351A heavily blurred teal-to-violet blob and its label pull into sharp focus on hover like a lens rack.

Focus Scale Railfocus-scale-rail-15303Horizontal snap rail where each card scales up and brightens as it passes the centre, driven by a view timeline.

Focus Toolbar Textareafocus-toolbar-textarea-15399Comment box that keeps its formatting toolbar folded away until the textarea is focused, when the bar unrolls above it.

Fold Crease Dividerfold-crease-divider-15591Separator built as a crease in the surface, shadow gathering above the fold and a thin catch of light below it.

Folded Ribbon Textfolded-ribbon-text-15659The word is printed across a concertina strip, every letter on a facet pitched alternately away from and toward the reader, and the pleats open out flat one after another on hover.

Folder Tab Cardfolder-tab-card-15005A tabbed folder card that tips its front open on hover while the paper inside slides up out of it.

Folder Tab Stackfolder-tab-stack-15681Manila-folder tabs stacked at different depths where the selected one rises to the front and paints over the pane border so tab and panel read as a single sheet, while the others sit sunk behind until hovered.

Follow Toggle Pillfollow-toggle-pill-15333A Follow pill that fills in, grows a checkmark and relabels itself Following when clicked, using a hidden checkbox.

Form Completion Meterform-completion-meter-15833Profile checklist headed by a conic progress ring reading sixty percent, with the finished requirement ticked and greyed and each outstanding one offering an add button on hover.

Frozen Grid Cornerfrozen-grid-corner-15901Data grid frozen on both axes at once — the header row sticks to the top, the metric column sticks to the left, and the corner cell carries both offsets with a higher stacking order so it never slips under either.

Gallery Dim Spotlightgallery-dim-spotlight-15441Thumbnail grid where hovering anywhere greys the whole set, and the tile under the cursor keeps its colour and grows.

Gear Medallion Framegear-medallion-frame-15499Rainbow disc with a ring of radial teeth masked out of the layer behind it, the teeth turning slowly around a still face.

Gear Mesh Togglegear-mesh-toggle-15695Two toothed wheels sitting idle in grey until the switch engages, when they take on cyan and turn against each other, the smaller one running faster as their teeth interlock.

Gear Train Loadergear-train-loader-15641Two toothed wheels with hubs and bolt holes sit meshed at the rim and turn against each other, the smaller amber gear running faster in the opposite direction.

Glitch Textglitch-text-15009Bold heading that splits into cyan and red offset slices jittering like a broken signal on hover.

Glow Pulse Blue MD Buttonglow-pulse-blue-md-button-0316Blue button that emits a soft pulsing glow ring on an infinite loop.

Gooey Merge Blobsgooey-merge-blobs-15355Two lime blobs that stretch and fuse together as they meet on hover, using the classic blur-plus-contrast gooey filter.

Grade Scale Badgegrade-scale-badge-15875Rating badge that shows the whole A-to-E scale rather than a single letter: the four grades this item did not earn stay short and desaturated while the awarded grade grows tall, keeps its full colour and takes a marker above it.

Gradient Frame Maskgradient-frame-mask-15243A hollow teal gradient frame carved with mask-composite that thickens and slides its gradient on hover.

Gradient Rim Taggradient-rim-tag-15073Dark pill wrapped in a thin violet-to-amber gradient rim that sweeps and glows on hover.

Grid Distortiongrid-distortionA ruled grid where the space bends toward the pointer, not the lines. Two cells away the grid is exactly where it was.

Grid Pulse Fieldgrid-pulse-field-15391Indigo lattice with a soft radial pulse wandering behind it, lighting different cells of the grid as it passes.

Growing Textarea Fieldgrowing-textarea-field-15041Compact textarea that expands on focus while a teal character-count chip fades in at the corner.

Gyroscope Ringsgyroscope-rings-15751Three nested gimbal rings each turning about a different axis at its own speed around a bright core, so the assembly never repeats the same silhouette twice.

Halftone Fade Tilehalftone-fade-tile-15023A halftone dot screen that fades from bold dots to fine points across a deep sky gradient.

Halftone Wavehalftone-waveA dot screen set at the print angle, its dots sized by a travelling wave. At 0 degrees it reads as a table of dots; at 23 it reads as tone.

Handoff Swimlane Stepshandoff-swimlane-steps-15813Four steps dropped into two owner lanes, with diagonal connectors cutting between the lanes at every handoff so the work is seen changing hands twice.

Hazard Stripe Alerthazard-stripe-alert-15177A warning alert edged with diagonal hazard stripes that scroll and a caution icon that tilts on hover.

Hazard Stripe Buttonhazard-stripe-button-14975Amber warning button that reveals marching diagonal hazard stripes while hovered.

Hazard Tape Borderhazard-tape-border-15885Warning panel edged with a twelve-pixel band of diagonal caution stripes that crawl continuously around the box, the dark plate inset inside it carrying a faint amber keyline.

Heart Like Iconheart-like-icon-15785A heart built from a rotated square and two discs that gives a double beat every few seconds and throws out an expanding like-ring when hovered.

Heart Mask Tileheart-mask-tile-15241A rose gradient masked into a heart by an inline SVG path, popping larger with a springy hover.

Heatmap Cell Gridheatmap-cell-grid-15273Compact data grid whose cells are tinted by value like a heatmap, with each cell popping forward on hover.

Helix Strand Loaderhelix-strand-loader-14987Two rows of dots weave over and under each other in a sine wave like a rotating DNA helix.

Hexagon Avatarhexagon-avatar-15153Initials on a gradient hexagon with a teal rim, the tile rotating a notch on hover while the letters stay upright.

Hinged Doorhinged-door-15201A wooden door in a glowing amber frame that swings open on its left hinge in perspective to reveal the word inside on hover.

Histogram Binshistogram-bins-15253A violet histogram of nine bell-shaped bins over a baseline with a dashed mean marker and axis ticks.

History Scrub Stepshistory-scrub-steps-15815Version list running oldest to newest where pointing at an entry offers to restore it and strikes through every later edit, previewing exactly what rolling back would throw away.

Hold To Confirm Ringhold-to-confirm-ring-15845Destructive button guarded by a hold: the red conic ring around the bin sweeps from empty to full over the second and a half you keep the pointer down, and drains back if you let go early.

Holo Foil Cardholo-foil-card-15007A trading-card style tile whose iridescent foil sheen slides across and brightens when hovered.

Horizontal Flex Accordionhorizontal-flex-accordion-15191Three vertical teal panels where the hovered one grows to triple width and lights up while its siblings squeeze aside.

Houndstooth Weavehoundstooth-weave-15485Classic houndstooth check woven from four offset diagonal gradients, slate teeth on a bone-white ground.

Hourglass Timer Iconhourglass-timer-icon-15791A framed hourglass whose upper chamber empties through a thin stream into the heap below, and once the sand has run through the whole frame turns over to start again.

Hourglass Timer Meterhourglass-timer-meter-15893Remaining time read as sand rather than a bar — the level in the top cone drops while the heap in the bottom one builds, with a dashed grain stream falling through the waist and the whole glass turning over on hover.

Avatar Stackhover-avatar-stackFour overlapping circular avatars that fan out horizontally on hover, with each one rising to the top in turn.

Hover Dropdown Navhover-dropdown-nav-15049Horizontal nav where hovering the Products link drops a sky-outlined panel of sub-links into view.

Icon Bounce Hoverhover-iconA pill chip whose arrow shoots up and to the right on hover, while the surface fills with color.

Image Zoom Hoverhover-zoomA framed visual that smoothly zooms in on hover while the overlay text stays sharp — common in image galleries.

HyperspeedhyperspeedStreaks accelerating out of a vanishing point, each hottest at its head. Done in polar coordinates, so 180 of them cost exactly what one does.

Icon Expand Buttonicon-expand-button-14961A round plus button that unrolls into a labeled pill on hover while the icon twists.

Icon Flip Buttonicon-flip-button-14979Button whose icon tile flips over like a coin on hover to reveal a checkmark on its back face.

Icon Pill Stepsicon-pill-steps-15269Vertical onboarding steps rendered as icon pills on a dotted rail, each nudging sideways on hover.

Import Error Gridimport-error-grid-15827CSV import preview headed by a red count banner, the two offending cells tinted and underlined with a wavy rule that raises the reason for the rejection on hover.

Initials Avatarinitials-avatar-15437Squircle initial avatars in per-person gradients, each rounding to a full circle and lifting when hovered.

Inline Edit Fieldinline-edit-field-15035Text that reads as plain copy until hovered, when a pencil slides in and the field reveals itself.

Floating Label Inputinput-floatA label that starts centered and gracefully floats up to the corner when the field is focused or filled.

Underline Grow Inputinput-underlineMinimalist input whose bottom border grows in from the left on focus for an elegant material reveal.

Insert Gap Dividerinsert-gap-divider-15861The hairline sitting in the gap between two blocks turns into a working control when you reach for it: the rule goes blue and dashed, a plus button springs up at its left end and an Insert block label slides out from behind it.

Invert Filter Tileinvert-filter-tile-15347A dark tile with amber and indigo blobs that flips to a light negative on hover using the invert filter with hue-rotate to keep hues stable.

IridescenceiridescenceThin-film interference: one phase read by three cosines a third of a turn apart, so the hue sweeps the whole palette instead of crossfading between two ends of it.

Iris Open Entranceiris-open-entrance-15705Panel uncovered by a circular clip that widens from a point at its centre, a thin ring racing ahead of the opening before the heading and caption fade up inside.

Isometric Cubes Tileisometric-cubes-tile-15021Stacked isometric cubes built entirely from six tiled linear gradients in indigo tones.

Jigsaw Join Buttonjigsaw-join-button-15639Button split into two puzzle halves sitting apart in a dashed tray, one carrying a round tab and the other a masked notch, which slide together on hover until the tab seats and the word reads whole.

Journey Path Stepsjourney-path-steps-15523Four numbered stages threaded around a dashed S-shaped route, so the journey doubles back instead of running in a straight line.

Kebab Menu Popoverkebab-menu-popover-15101A ⋮ overflow button with its dropdown menu open, rows highlighting violet and a destructive item set apart.

Ken Burns Tileken-burns-tile-15439Image tile under a slow Ken Burns pan and zoom that reverses at each end, with a gradient caption pinned to the foot.

Keyhole Peep Maskkeyhole-peep-mask-15775A gradient scene cut to an old-fashioned keyhole by uniting a circular mask with a narrow conic wedge below it, and the view pans across as you lean in on hover.

Label Track Switchlabel-track-switch-15413Wide switch that carries the words ON and OFF inside its track, each sliding out of view as the knob takes its place.

Ledger Accordionledger-accordion-15199A numbered emerald accordion whose open row fills its number badge and turns the plus into a minus.

Letterpress Textletterpress-text-15019Text debossed into a violet plate with an edge highlight that lights up on hover.

Lifted Nav Tabslifted-nav-tabs-15739Bottom navigation bar where selecting a tab lifts its icon out of the bar on a springy curve into a glowing gradient disc and floats its label up underneath.

Lightbulb Switch Iconlightbulb-switch-icon-15331A dim CSS lightbulb that lights up amber with a soft glow halo on hover.

Lightning Arclightning-arcThree filaments on their own strike clocks, most cycles passing with nothing at all. A bolt that is always there is a squiggle; the waiting is the effect.

Underline Reveal Linklink-underlineA link whose underline wipes in from left to right on hover and wipes out the same way on leave.

Liquid Fill Checkboxliquid-fill-checkbox-15415Checkbox that floods with teal liquid rising on a curved surface, the tick springing in once the box is full.

Liquid Metalliquid-metalNoise sampled at a position that is itself noise, twice, then cut into contours so the folds read as a polished surface rather than as fog.

Liquid Rise Buttonliquid-rise-button-14943Outline button that floods from the bottom with a curved liquid crest on hover.

Liquid Tank Meterliquid-tank-meter-15141Circular vessel filled to sixty percent by a slowly rotating blob whose uneven rim reads as a lapping wave.

Live Pulse Badgelive-pulse-badge-15069On-air LIVE pill whose white dot throws two staggered expanding rings.

Indeterminate Barloader-barA slim pill track with a colored segment that slides endlessly from left to right — perfect for progress feedback.

Three Dots Bounceloader-dotsThree colored dots that bounce in a staggered rhythm, perfect for inline status indicators.

Hexagon Flip Loaderloader-hexA purple hexagon (via clip-path) that flips on its Y axis while bouncing — geometric and modern.

Orbit Loaderloader-orbitThree colored dots circle a central point at staggered phases, like electrons tracing an orbit.

Pulse Ring Loaderloader-pulse-ringTwo concentric rings expand and fade in alternation, creating a sonar-like pulse.

Gradient Ring Loaderloader-ring-gradA conic gradient masked into a thin ring that rotates — a more colorful alternative to the classic spinner.

Skeleton Shimmerloader-skeletonTwo stacked placeholder bars with a soft sweeping highlight that signals content is on its way.

Classic Spinnerloader-spinnerThe timeless rotating-border spinner, refined with a subtle base ring for depth.

Square Waveloader-squareA single square that rotates and morphs its border-radius in a hypnotic wave pattern.

Liquid Wave Loaderloader-waveTwo counter-rotating waves slosh inside a circular vessel, creating a hypnotic liquid-fill illusion.

Locked Course Stepslocked-course-steps-15807Lesson chain running from a struck-through completed step through the in-progress one with its own part-filled bar, down to a padlocked step that is still out of reach.

Lollipop Chartlollipop-chart-15255Ranked lollipop chart with orange stems ending in a dot marker, category labels on the left and values on the right.

Long Shadow Textlong-shadow-text-15011A heading with a stacked flat shadow that extrudes into a long 3D block as it lifts on hover.

Louver Blindslouver-blinds-15211A stack of violet window slats tilts open in staggered 3D rotation on hover to reveal the glowing scene behind.

Mail Client Skeletonmail-client-skeleton-15879Three-pane inbox placeholder — an icon rail, a message list with one row already marked as selected, and a reading pane with a sender block and ragged body lines — under one sweep across all three panes.

Marimekko Mosaic Chartmarimekko-mosaic-chart-15795Mosaic of stacked columns where each column is as wide as the share of the market it represents, so both the split inside a region and the size of the region read from one block.

Marker Bubble Progressmarker-bubble-progress-15147Slim progress track with a round thumb marker and a floating value bubble that ride the fill as it grows.

Marker Highlight Tabsmarker-highlight-tabs-15195Serif text tabs where the checked tab receives a hand-drawn pink highlighter stroke that sweeps in from the left.

Marquee Label Buttonmarquee-label-button-14981The static label lifts away on hover and a looping ticker of text scrolls across the button instead.

Medal Leaderboard Tablemedal-leaderboard-table-15279Ranking table with gold, silver and bronze rank tints, avatar chips and a warm row highlight on hover.

Media Timelinemedia-timeline-15517Milestone rail where every entry carries a thumbnail beside its label, the image tilting and lifting as the row is hovered.

Menu Bars Morphmenu-bars-morph-15847Menu button whose three stacked bars converge and rotate into a cross as the middle bar squeezes out of existence, the caption swapping from Menu to Close on the same beat.

Merge Conflict Alertmerge-conflict-alert-15731Version-control notice whose body is a two-line diff, the incoming and outgoing versions stacked in red and green and each side lighting up as you point at it.

Mesh Header Cardmesh-header-card-15379Content card topped by a four-point mesh gradient whose colour blobs drift slowly against each other behind a pill label.

Metaball Lavametaball-lavaSix inverse-square fields thresholded into one body, so blobs grow a neck as they merge. No amount of border-radius produces a neck.

Metro Line Stepsmetro-line-steps-15513Transit-map progress line where stops are ring stations, interchanges are drawn larger and the live stop carries a halo.

Milestone Flag Barmilestone-flag-bar-15617Progress track with pennant flags planted at each reward point, the ones already passed lit in the same colour as the fill.

Milestone Thermometermilestone-thermometer-15811Fundraising tube filled from the bottom with milestone ticks scored across it and money labels beside each one, the reached amounts warmed and the level climbing toward the next milestone on hover.

Mirror Reflection Textmirror-reflection-text-15017A word with a fading upside-down reflection below it, both drifting apart when hovered.

Mixer Fader Bankmixer-fader-bank-15781Five channel faders in a console strip, each cap riding a lit groove against a tick scale, and the whole mix re-levels itself to a new set of positions on hover.

Moire Interferencemoire-interference-15233Two fine violet line screens overlap at a slight angle to form moire waves that shift as they twist on hover.

Monospace Ledger Tablemonospace-ledger-table-15283Accounting ledger with tabular monospace credit and debit columns and a double-ruled balance row.

Morphing Blob Shapemorphing-blob-shape-15327An organic gradient blob whose border-radius keeps morphing between shapes, brightening on hover.

Multi-Select Chipsmulti-select-chips-15417Row of filter chips that flip to a solid green pill and grow a tick from nothing as each one is selected.

Multi-Step Formmulti-step-form-15539Checkout step with a three-segment progress head, a paired expiry and CVC row, and back and continue actions.

Multiply Wash Tilemultiply-wash-tile-15577Light photo tile that takes a two-colour gradient wash multiplied over it on hover, deepening every tone at once.

Music Player Skeletonmusic-player-skeleton-15111Now-playing card placeholder with pink-tinted album art, title bars, a seek bar and shimmering control dots.

Mute Togglemute-toggle-15419Speaker control whose equaliser bars bounce while sound is on, then flatten as a red slash strikes across on mute.

Breadcrumb Trailnav-breadcrumbA breadcrumb trail with chevron separators that nudge forward on hover, and a bolded current page.

Hover Dropdown Menunav-dropdownA native <details>-based dropdown that animates open, with arrow rotation and hover-highlighted menu items.

Animated Hamburgernav-hamburgerPure-CSS hamburger menu using the checkbox hack — three lines morph into an X with no JavaScript.

Pill Tab Switchernav-pill-tabsA segmented pill tab control with a floating indigo indicator that snaps to the selected option via :has().

Neon Constellationneon-constellation-15759Four nodes wired together by faint edges, with a bright signal running down each link in turn and every node flaring as the pulse arrives at it.

Neon Dial Gaugeneon-dial-gauge-15755Round instrument face where the glow is a measurement: ticks light cyan up to the current reading, the boundary tick breathes, and a bright needle drifts either side of it.

Neon Laser Scannerneon-laser-scanner-15219A glowing red laser line sweeps up and down across a barcode panel.

Neon Marker Highlightneon-marker-highlight-15223A thin amber neon underline swells into a full glowing highlighter stroke behind the phrase on hover.

Neon Reflection Signneon-reflection-sign-15757A steady pink sign standing on a wet floor line, its blurred mirror image below wavering and skewing as if the puddle underneath it never quite settles.

Neon Ripple Ringsneon-ripple-rings-15217Concentric cyan neon rings pulse outward from a glowing core like a sonar ping.

Neon Sweep Borderneon-sweep-border-15221A fuchsia comet tail orbits the border of a dark card, leaving a glowing trail as it goes.

Neon Tube Toggleneon-tube-toggle-15089Hollow outline switch that ignites like a cyan neon tube, with a glowing thumb, when checked.

Neon Underline Linkneon-underline-link-15215Text link whose short glowing violet underline sweeps to full width and brightens the label on hover.

Neon Wireframe Cubeneon-wireframe-cube-15213A slowly turning 3D cube drawn from six glowing indigo outline faces.

Notched Tech Buttonnotched-tech-button-14951HUD-style button with clip-path notched corners that brightens and spaces out its label on hover.

Notification Popovernotification-popover-15423Bell button with an unread count badge that opens a right-aligned panel of notifications, unread rows marked by a blue dot.

NPS Scalenps-scale-15541Eleven-point recommendation scale where detractor and promoter halves preview in different colours and the choice lifts out of the row.

Ocean Action Overlayocean-action-overlay-11703Media tile whose controls rise into a dimmed frame on a stagger, using `transition-delay` so the sequence costs no keyframes.

Ocean Activity Feedocean-activity-feed-10783Event stream with avatars punched out of a connecting spine, refs set in monospace so an identifier never reads as prose.

Ocean Activity Ringsocean-activity-rings-10411Three nested conic dials each masked to a band, so one element per metric shows three independent values without any overlap maths.

Ocean Add to Cart Flightocean-add-to-cart-flight-13143Ghost of the item arcing from the button to the basket and shrinking as it goes, the count bumping only once the flight lands so cause and effect stay in order.

Ocean Airy Metrics Tableocean-airy-metrics-table-6887Borderless metrics table in ocean that dims every row except the one under the cursor.

Ocean Alert Dialogocean-alert-dialog-10491Centred confirmation led by a ringed icon, with the dismissive action styled quieter than the one you actually want pressed.

Ocean Alternating Timelineocean-alternating-timeline-9503Entries flipping side to side across a centre spine, with each node punched out of the rail by a background-colored ring.

Ocean Ambient Glow Cardocean-ambient-glow-card-6483Card sitting above a blurred ocean duplicate of itself — soft ambient light instead of a hard neon outline.

Ocean Amount Fieldocean-amount-field-11303Currency input with a fixed symbol and a unit picker sharing the box, the figure in tabular numerals so the caret does not shift as digits change.

Ocean Animated Gradient Text (MD)ocean-animated-gradient-text-md-1100Text filled with an animated ocean gradient that flows horizontally.

Ocean App Barocean-app-bar-11343Compact product header carrying mark, search, links and account in one blurred row, the search flexing so the ends stay pinned at any width.

Ocean Arch Windowocean-arch-window-11983Rounded arch cut with asymmetric border-radius rather than a clip-path, so the inner keyline can follow the same curve at an inset.

Ocean Argyle Latticeocean-argyle-lattice-11943Offset diamond blocks crossed by two thin repeating diagonals, which is what separates argyle from a plain checkerboard on the bias.

Ocean Arrow Slide Buttonocean-arrow-slide-button-5041The standard product CTA: ocean fill, and the arrow eases forward on hover.

Ocean Article Skeletonocean-article-skeleton-9011Thumbnail, headline and three ragged text lines, sized to the article card it stands in for so nothing jumps when the content lands.

Ocean Aurora Bloom Cardocean-aurora-bloom-card-8423Blurred ocean gradient breathing behind a dark card — glow without a single box-shadow.

Ocean Aurora CTAocean-aurora-cta-6507Light button orbited by a blurred ocean conic aura — high contrast on the button, all the color around it.

Ocean Auto Testimonialsocean-auto-testimonials-12251Quotes cross-fading on a shared twelve-second cycle with progress bars filling in lockstep, so the indicator is the timer rather than a separate loop.

Ocean Avatar Groupocean-avatar-group-10451Overlapped stack with a counted overflow chip, each face lifting out of the pile on hover with a background-colored ring keeping the seams clean.

Ocean Avatar Skeleton (MD)ocean-avatar-skeleton-md-2923Loading avatar with a rotating ocean conic gradient + text lines.

Ocean Avatar Stackocean-avatar-stack-3749Overlapping avatar group in ocean that fans out on hover, with an overflow chip.

Ocean Back to Topocean-back-to-top-10903Floating return control pinned with `position: sticky` inside the scroller, so it needs no fixed positioning and no scroll listener.

Ocean Badged Dividerocean-badged-divider-11383Section rule broken by a ringed medallion, the inner diamond rotated so the ornament reads as deliberate rather than as a dot.

Ocean Battery Meterocean-battery-meter-10383Charge indicator with the terminal nub drawn as a pseudo-element, so the cell body stays a clean box for the fill to sit inside.

Ocean Beaded Frameocean-beaded-frame-10343Four repeating gradients as edges rather than a dashed border, which is the only way to animate the dashes travelling around the box.

Ocean Beam Borderocean-beam-border-6147An ocean light packet chasing the border. Uses @property so the conic angle is a real animatable value, not a transform hack.

Ocean Beam Dividerocean-beam-divider-5751Hairline rule with an ocean light packet running along it — a section break with a pulse.

Ocean Beam Spotlightocean-beam-spotlight-5493A wide ocean beam sweeping down from above the fold, softened with grain.

Ocean Before / After Compareocean-before-after-compare-7321Drag the corner to wipe between an ocean treatment and the grayscale original — CSS resize, no JS.

Ocean Bento Metric Tile (MD)ocean-bento-metric-tile-md-5183Dashboard tile with a hairline ring, a lit top edge and an ocean corner bloom — the bento-grid unit.

Ocean Blend Mode Headlineocean-blend-mode-headline-7855Type set in overlay blend over a grainy ocean field, flipping to difference on hover.

Ocean Blind Revealocean-blind-reveal-11611Six slats collapsing on a stagger from their top edge, so the surface behind is uncovered in bands rather than by a single wipe.

Ocean Blur Backdrop Dialogocean-blur-backdrop-dialog-3773Dialog over a frosted ocean backdrop; the scrim fades while the sheet lifts in.

Ocean Bokeh Fieldocean-bokeh-field-11263Out-of-focus orbs on one keyframe with negative delays, so the six start mid-cycle and the field is already in motion on first paint.

Ocean Book Coverocean-book-cover-13663Hardcover hinged at the spine rather than the page edge, so it swings past 90 degrees and lies back against itself the way a real cover does.

Ocean Border Draw-Inocean-border-draw-in-14131Four edges scaling in sequence from the corner the previous one finished at, so a single stroke appears to travel the perimeter before the label arrives.

Ocean Bottom Tab Barocean-bottom-tab-bar-8087Frosted mobile tab bar where the active item takes an ocean tint and lifts its icon.

Ocean Bouncing Dots (Norm)ocean-bouncing-dots-norm-0562Three bouncing dots in ocean colors with staggered timing.

Ocean Brick Bondocean-brick-bond-14543Running bond where the half-course offset comes from a second layer at double the cell size, so the staggered joints fall out of the geometry rather than being drawn.

Ocean Broken Imageocean-broken-image-13811The state every gallery eventually shows and few designs draw — a torn picture glyph over a hatched field, with the filename kept so the failure is diagnosable.

Ocean Build Logocean-build-log-11171Pipeline steps in monospace with completed ticks, one spinner on the running line, and pending steps dimmed rather than hidden.

Ocean Bulb Marqueeocean-bulb-marquee-12971Theatre sign whose bulbs are four repeat-axis radial gradients, stepped rather than eased so the chase clicks from lamp to lamp instead of sliding.

Ocean Bulk Action Barocean-bulk-action-bar-14771Action tray that rises over the table once rows are ticked, carrying the count and keeping the destructive option visually apart from the safe one.

Ocean Bullet Chartocean-bullet-chart-14023Stephen Few's replacement for the gauge — a measure bar over banded qualitative ranges with a target tick, carrying in one row what a dial needs a whole tile for.

Ocean Calendar Popoverocean-calendar-popover-13651Date field opening a month grid anchored beneath it, leading days from the previous month dimmed rather than blank so the week rows stay aligned to their columns.

Ocean Candlestick Chartocean-candlestick-chart-12023OHLC bars where each candle's wick and body come from custom properties on the element, so the data lives in the markup and the CSS stays one rule.

Ocean Caption Slideocean-caption-slide-9143Media tile whose caption bar slides up from below the frame on hover while the highlight drifts, marked up as a real figure and figcaption.

Ocean Card Deal-Inocean-card-deal-in-9051Three tiles hinged from their bottom edge and dealt in on a stagger, with the perspective on the parent so they share one vanishing point.

Ocean Card Deckocean-card-deck-7991Stacked ocean card that fans its two layers out from underneath when hovered.

Ocean Card Number Fieldocean-card-number-field-12903Payment entry as one joined control — number above, expiry and CVC sharing the row below — with the detected brand mark sitting inside the field it applies to.

Ocean Card Stackocean-card-stack-6443Stack of ocean cards that fans out on hover — depth from layering, not perspective, so it stays crisp.

Ocean Card Tabsocean-card-tabs-10571Radio-driven tabs whose panels are stacked in one grid cell, so the container height is the tallest panel and switching never jumps.

Ocean Carousel Ringocean-carousel-ring-10583Six panels pushed out along Z at sixty-degree intervals and turned as one group, which is the whole trick behind a 3D carousel.

Ocean Category Pillsocean-category-pills-11451Taxonomy links keyed by a colour dot rather than a filled background, so a row of them stays readable instead of turning into a paint chart.

Ocean Cellular Fieldocean-cellular-field-12543Six overlapping radial cells at fixed seed positions, each drifting on its own vector so the field reorganises without any single blob reading as the subject.

Ocean Centre Action Barocean-centre-action-bar-14531Mobile tab bar whose primary action sits raised in the middle, punched out of the bar by a ring shadow in the bar's own colour rather than by a real cut-out.

Ocean Changelog Accordionocean-changelog-accordion-13703Release entries folded by version, each summary carrying its own change-type tag and ship date so the history is readable without opening a single panel.

Ocean Character Staggerocean-character-stagger-10331Letters wrapped individually and released seventy milliseconds apart, each rotating slightly so the line assembles rather than sliding as a block.

Ocean Chart Skeletonocean-chart-skeleton-10263Placeholder shaped like the chart it stands in for — title, ragged bars and an axis — so the panel does not resize when real data arrives.

Ocean Checkbox Listocean-checkbox-list-11491Grouped options under a select-all whose indeterminate state is a bar rather than a tick, the one case a checkbox has three readings.

Ocean Checkerboardocean-checkerboard-4525Two-tone ocean checkerboard that shuffles half a tile back and forth.

Ocean Checkout Stepperocean-checkout-stepper-4887Three-stage horizontal stepper; completed stages fill with the ocean gradient and connect their rails.

Ocean Chevron Dividerocean-chevron-divider-8823A rule interrupted by a rotated chevron, punched out of the line with a solid box-shadow rather than a background swatch that has to match.

Ocean Chevron Flowocean-chevron-flow-9451Interlocking arrow segments cut with `clip-path`, the first and last squared off so the run reads as a pipeline with real ends.

Ocean Chevron Selectocean-chevron-select-6991Native select with the OS arrow stripped and an ocean chevron that nudges down on hover.

Ocean Chromatic Textocean-chromatic-text-11063Two coloured copies drifting apart in `screen` blend, so the fringes brighten where they overlap the way a real lens split does.

Ocean Circuit Tracesocean-circuit-traces-10691Orthogonal tracks with solder pads at the junctions, on two grid scales so the vias land between the crossings rather than on them.

Ocean Clip Wipe Reveal (MD)ocean-clip-wipe-reveal-md-4601An ocean panel wipes across via clip-path to swap the label on hover.

Ocean Coach Markocean-coach-mark-8971Product-tour callout anchored to a pinging hotspot, with step counter and advance button — the shape a first-run walkthrough actually needs.

Ocean Command Paletteocean-command-palette-6269⌘K palette on a blurred panel with an ocean selected row — the navigation surface every dev tool now ships.

Ocean Command Search Fieldocean-command-search-field-5567Search input with a CSS-drawn magnifier and a ⌘K keycap hint, lighting ocean on focus.

Ocean Commit Graphocean-commit-graph-13543Branch-and-merge history drawn with positioned gradient segments instead of SVG, so the fork stub, the parallel lane and the merge elbow are each one background layer.

Ocean Comparison Matrixocean-comparison-matrix-10851Plan matrix with the recommended column tinted top to bottom, and ticks and crosses drawn from borders rather than glyphs that vary by font.

Ocean Completion Checklistocean-completion-checklist-14611Onboarding meter that shows the remaining work as items rather than a percentage, the bar and the count agreeing so neither has to be trusted alone.

Ocean Condensing Headerocean-condensing-header-14623Masthead that gives back two thirds of its height as the page moves under it — logo, wordmark and nav each shedding at their own rate rather than scaling as a block.

Ocean Confetti Burstocean-confetti-burst-14451Six scraps thrown on individually authored arcs with mismatched durations and spins, because a burst where every piece shares a curve reads as a fan.

Ocean Confirm Dialogocean-confirm-dialog-8327Destructive confirmation over a blurred scrim, with an ocean primary action.

Ocean Confirm Popoverocean-confirm-popover-10251Inline confirmation with cancel and proceed, opening on focus as well as hover so a keyboard user can reach the buttons inside it.

Ocean Conic Border (MD)ocean-conic-border-md-3289An ocean light sweeps continuously around the border edge.

Ocean Conic Progress Ringocean-conic-progress-ring-8295Conic ocean ring with a punched-out center and a numeric readout.

Ocean Conic Ring Spinnerocean-conic-ring-spinner-5099Thin ocean arc spinner — one element, drawn by a conic gradient and cut to a ring with a radial mask.

Ocean Conic Sweep Maskocean-conic-sweep-mask-13131Radar-style wipe driven by an animated @property angle inside the mask itself, so the reveal follows a rotating wedge rather than a straight edge crossing the box.

Ocean Conic Swirlocean-conic-swirl-1516Rotating ocean conic gradient that swirls around the center.

Ocean Connection Barocean-connection-bar-11811Persistent network notice with a pinging indicator and a manual retry, sized as a bar rather than a toast because it does not auto-dismiss.

Ocean Consent Barocean-consent-bar-10531Cookie notice giving both choices equal size, since a decline styled as an afterthought is the pattern regulators actually object to.

Ocean Consent Panelocean-consent-panel-13771Per-category cookie controls rather than one accept button, with the essential row switched on and visibly locked so the choice that is not a choice reads as such.

Ocean Consent Rowocean-consent-row-9611Whole card is the label, so the entire row is a hit target, with the tick scaled from zero rather than toggled on `display`.

Ocean Constellation Netocean-constellation-net-13823Node field and its link mesh built as two gradient layers on matching cell sizes and moved together, so the dots stay on the lines without a single positioned element.

Ocean Context Menuocean-context-menu-10063Right-click menu with a rule between groups and each item's binding right-aligned, dimmed until the row is hovered so the shortcuts do not compete.

Ocean Contour Fieldocean-contour-field-8731Two repeating radial gradients offset into contour rings, drifting in opposite directions so the map reads as terrain rather than a texture.

Ocean Conversion Funnelocean-conversion-funnel-10771Stage bars narrowing by percentage width with the count inside each, so the drop-off is legible without reading a single number.

Ocean Copy Confirm Swapocean-copy-confirm-swap-7685Button whose label slides away to reveal an ocean "Copied" state underneath.

Ocean Corner Bracketsocean-corner-brackets-8255Two ocean corner brackets that grow into a complete frame when hovered.

Ocean Corner Keylineocean-corner-keyline-10371Two opposing corner brackets that grow to meet as a full frame on hover, so the border draws itself from both ends at once.

Ocean Corner Promoocean-corner-promo-11743Non-blocking announcement that slides up from the corner with its own dismiss, the pattern for news that does not deserve a modal.

Ocean Corner Ribbonocean-corner-ribbon-7531Card with a rotated ocean ribbon clipped to the top-right corner.

Ocean Count Badgeocean-count-badge-8863Unread counter pinned to the corner of a carrier tile, with a background-colored ring so it stays legible over whatever sits beneath it.

Ocean Countdown Ringocean-countdown-ring-13303Timer that empties rather than fills, the sweep animated through a registered angle property so the arc interpolates smoothly instead of snapping between conic stops.

Ocean Countdown Toastocean-countdown-toast-3953Frosted toast with an ocean bar draining along the bottom to show time until dismiss.

Ocean Counted Textareaocean-counted-textarea-10863Field and its meta bar joined into one control by removing the shared border, both taking the focus color so they light as a unit.

Ocean Counter Rollocean-counter-roll-12851Odometer entrance built from three digit columns behind fixed windows, each travelling a different distance and settling at a different moment so it lands like a mechanism.

Ocean Counter Tabsocean-counter-tabs-9291Tab strip carrying per-tab counts, with the underline scaled from zero and the badge recoloring only on the selected tab.

Ocean Coverflowocean-coverflow-9303Three panels turned toward a shared vanishing point, the flanking pair dimmed with `brightness` so depth reads without a fog layer.

Ocean Coverflow Railocean-coverflow-rail-7413Three ocean panels in perspective — the flanks straighten and brighten on hover.

Ocean Crossfade Slideshowocean-crossfade-slideshow-13423Slides stacked in place and dissolved between rather than translated, which keeps a full-bleed image from ever showing an edge, with the active dot stretching to a pill.

Ocean Crosshair Readoutocean-crosshair-readout-11503Chart hover state as one unit — dashed guide, marker dot and a value card pinned above the same x position, so the three never drift apart.

Ocean CRT Staticocean-crt-static-11291Phosphor tint under hard scanlines with a soft band rolling through, the three layers separate so each can be tuned without touching the others.

Ocean Curtain Revealocean-curtain-reveal-6099Ocean banner uncovered top-to-bottom by an animated clip-path inset — no wrapper element needed.

Ocean Custom Scrollbarocean-custom-scrollbar-7103Scrollable list with a slim ocean gradient thumb — styled for both WebKit and Firefox.

Ocean Date Mask Fieldocean-date-mask-field-14303Fixed day/month/year segments that take focus one at a time and auto-advance, so the separators are chrome the user never has to type.

Ocean Date Rangeocean-date-range-12171Two dates joined by an en-dash inside one focus ring, with quick presets underneath because most range picks are a common span, not an arbitrary one.

Ocean Day Agendaocean-day-agenda-13571Hour rail with events sitting in the slots they occupy and an empty hour left visibly empty, the current-time rule crossing the whole column with a dot on the gutter.

Ocean Delivery Trackerocean-delivery-tracker-14851Parcel progress with the vehicle riding the rail to the current node, both driven by the same easing so the marker and the fill arrive together.

Ocean Delta Chipocean-delta-chip-12583Percentage-change pill with a border-drawn caret, tabular figures so a column of them stays aligned, and a tinted fill derived from the same hue as the arrow.

Ocean Deploy Stepsocean-deploy-steps-4911Pipeline indicator: an ocean rail advances through stages while each label lights in turn.

Ocean Deploy Timelineocean-deploy-timeline-6713Build log timeline with ocean completed nodes, CSS-drawn checkmarks and a pulsing current step.

Ocean Desaturate Revealocean-desaturate-reveal-3737Media tile that sits in grayscale until hover, then restores full ocean color.

Ocean Detail Alertocean-detail-alert-12463Failure banner that keeps the stack trace folded behind a disclosure, so the summary stays one line and the detail is one click away rather than a separate screen.

Ocean Diagonal Splitocean-diagonal-split-12011Two panels cut on complementary diagonals with a deliberate gap between them, the labels nudged off-centre so neither straddles the seam.

Ocean Diagonal Stripesocean-diagonal-stripes-4501Barber-pole stripes in ocean sliding continuously across the surface.

Ocean Dial Sliderocean-dial-slider-14731Thermostat-style control where the handle is positioned by rotate-translate-counterrotate, so it rides the arc without the knob itself ever appearing to spin.

Ocean Directional Tooltipsocean-directional-tooltips-10223Top and bottom variants sharing one rule set, each arrow tinted to the gradient stop nearest it so the tail never mismatches the bubble.

Ocean Dismissible Bannerocean-dismissible-banner-8351Inline announcement with an ocean accent rail, info glyph and a rotating close button.

Ocean Divider (Med)ocean-divider-med-1975Fading ocean gradient divider line (med thickness), shown between two text blocks.

Ocean Divider (Thick)ocean-divider-thick-1977Fading ocean gradient divider line (thick thickness), shown between two text blocks.

Ocean Divider (Thin)ocean-divider-thin-1973Fading ocean gradient divider line (thin thickness), shown between two text blocks.

Ocean Donut Chartocean-donut-chart-4755Two-segment ocean donut drawn with one conic-gradient — no SVG, no chart library.

Ocean Donut Rowocean-donut-row-12051Three small multiples sharing one scale, so utilisation across resources is comparable at a glance rather than three separate readings.

Ocean Dot Carouselocean-dot-carousel-9691Slides translated as one strip with a pagination row whose active dot stretches into a pill rather than just changing color.

Ocean Double Frameocean-double-frame-9063Outer border with an inset rule that pulls further in on hover, so the frame breathes without the box itself resizing.

Ocean Double Rule Dividerocean-double-rule-divider-8851Two hairlines bracketing a glowing node, spaced far enough apart to read as a deliberate seam rather than a doubled border.

Ocean Download Progressocean-download-progress-12691One control carrying three states in sequence — label, determinate bar, then a checkmark — so the transfer never leaves the place the user clicked to start it.

Ocean Drag Handleocean-drag-handle-12303Sortable row whose dotted grip lights on hover and tilts fractionally while held, the cursor switching from grab to grabbing to confirm the state.

Ocean Drag Reorderocean-drag-reorder-14423Row lifting off the stack with a slight tilt while a dashed gap opens where it will land, so the drop target is shown rather than guessed at.

Ocean Dual Range Sliderocean-dual-range-slider-9663Two handles bounding a filled span, positioned as percentages so the same markup serves any min and max without recomputing pixels.

Ocean Dual-Ring Spinner (MD)ocean-dual-ring-spinner-md-3211Two concentric rings spinning in opposite directions in ocean colors.

Ocean Duotone Photoocean-duotone-photo-7773Grayscale base tinted ocean with mix-blend-mode: color — hover drops back to the original.

Ocean ECG Traceocean-ecg-trace-11903Heartbeat line cut from a clip-path polygon and scaled vertically, with a sweeping gain band passing over it like a monitor refresh.

Ocean Edge-Fade Chip Railocean-edge-fade-chip-rail-7227Overflowing chip row masked to fade at both edges so it reads as scrollable without a scrollbar.

Ocean Elastic Dropocean-elastic-drop-10303Squash-and-stretch entrance with a shadow that widens on impact, which is what sells the landing more than the bounce itself.

Ocean Emboss Reliefocean-emboss-relief-14143Letterforms pressed into the surface by one dark and one light offset shadow, the pair swapping sides on hover so the relief flips from debossed to raised.

Ocean Empty State Cardocean-empty-state-card-12731Placeholder panel with a dashed edge that reads as a slot waiting to be filled, the plus glyph tilting on hover so the whole card behaves like one target.

Ocean Empty Tableocean-empty-table-12131Zero-row state that keeps the header so the columns still teach what will appear, with one action rather than a bare "no data" line.

Ocean Equalizer Bars (Norm)ocean-equalizer-bars-norm-0748Five-bar audio equalizer in ocean colors with staggered heights.

Ocean Error Shake Fieldocean-error-shake-field-7709Field that shakes once on rejection, then focuses back to a calm ocean ring.

Ocean Event Cardocean-event-card-11183Listing led by a tear-off date block in a real `<time>`, so the day and month are one semantic unit rather than two decorated spans.

Ocean Expandable Tableocean-expandable-table-9543Detail row spanning the full width with `colspan`, keyed by an accent rule so the child reads as belonging to the row above it.

Ocean Expanding Outline (MD)ocean-expanding-outline-md-3405Outline pushes away from the button and blooms into an ocean glow on hover or keyboard focus.

Ocean Expanding Searchocean-expanding-search-8063Icon-only field that widens into a full ocean search box on hover or focus.

Ocean Exploded Stackocean-exploded-stack-8399Three ocean planes laid out isometrically that pull apart in Z on hover.

Ocean Facet Filtersocean-facet-filters-12423Stacked filter groups on native details elements, each summary carrying its active count and each row its result tally so the panel reads before it is opened.

Ocean Fade-Edge Listocean-fade-edge-list-6627Auto-scrolling list whose top and bottom dissolve into the page via mask-image — no hard cut, no wrapper gradients.

Ocean FAQ Accordionocean-faq-accordion-9263Native `<details>` rows whose plus collapses to a minus by rotating one bar — open state comes from the element, so it works without script.

Ocean Featured Pricing Cardocean-featured-pricing-card-5269The highlighted tier in a pricing table: ocean gradient ring, floating badge, CSS-drawn checkmarks.

Ocean Field Arrayocean-field-array-12931Repeatable row group where every entry carries its own remove control and the add affordance is dashed, marking it as the one row that is not yet data.

Ocean File Drop Zoneocean-file-drop-zone-7015Dashed upload target that tints ocean and spins its plus badge when you hover it.

Ocean Film Vignetteocean-film-vignette-11091Stacked grade, overlay grain and a radial vignette, the grain stepped in three frames so it stutters like emulsion rather than sliding.

Ocean Filmstripocean-filmstrip-10971Thumbnail row flanked by step controls, the active frame marked with an outline so selection costs no width and the strip never shifts.

Ocean Filter Popoverocean-filter-popover-14931Deferred-commit filter menu — selections stage inside the panel behind reset and apply, with the active count carried on the trigger so it survives closing.

Ocean Flickering Signocean-flickering-sign-4443Neon sign in ocean that stutters and cuts out like failing tube gas.

Ocean Flip Cardocean-flip-card-4243Card that flips 180° on hover to reveal its reverse ocean face.

Ocean Flip-In Entrance (MD)ocean-flip-in-entrance-md-3137Ocean card that flips in along the X axis with perspective.

Ocean Flip Switch (MD)ocean-flip-switch-md-2429Square-edged switch with an ocean gradient knob that slides horizontally. Shown in both states with labels.

Ocean Floating Dockocean-floating-dock-5625Frosted floating dock whose icons spring up and take on the ocean gradient under the pointer.

Ocean Floating Orbsocean-floating-orbs-5521Three heavily blurred ocean orbs drifting behind the content — a mesh gradient you can actually animate.

Ocean Flowing Gradient (Norm)ocean-flowing-gradient-norm-1298Full-bleed animated ocean gradient that flows diagonally on a loop.

Ocean Folder Iconocean-folder-icon-9703Folder drawn from one element and two pseudo-elements, the front flap hinged on its bottom edge so it opens in perspective on hover.

Ocean Folder Tabocean-folder-tab-13931Manila-folder outline where the tab's bottom stroke is painted out to join the panel, so the two shapes share one continuous border instead of stacking.

Ocean Folding Cubeocean-folding-cube-13091Four quadrants hinged at the shared centre corner, each folding in on X and out on Y a beat after the last so the square appears to turn itself inside out.

Ocean Folding Panelsocean-folding-panels-9331Four leaves hinged on their left edge and folded on a stagger, darkening as they turn away so the crease reads without a gradient overlay.

Ocean Footer Sitemapocean-footer-sitemap-13251Three-column link map under a gradient border-image rule, each link underlining from its leading edge so the columns stay quiet until something is pointed at.

Ocean Form Skeletonocean-form-skeleton-13383Placeholder shaped to the form it precedes — short label blocks over taller field blocks, a split row, and a submit bar carrying a warmer sweep than the fields above it.

Ocean Frosted Panelocean-frosted-panel-7879Glass panel over an ocean field — hovering pulls the blur back so the backdrop sharpens.

Ocean Fullscreen Takeoverocean-fullscreen-takeover-13183Dialog that grows from the footprint of the control that opened it to the whole viewport, its chrome fading in only after the box has finished travelling.

Ocean Gallery Skeletonocean-gallery-skeleton-11543Mixed-span grid placeholder, the wide cells breaking the rhythm so the loading state reads as a real masonry rather than a uniform block.

Ocean Gantt Barsocean-gantt-bars-10811Schedule rows offset by margin and sized by width, over a gridline background positioned to start where the track does.

Ocean Glass Card (MD)ocean-glass-card-md-3265Frosted glass card with an ocean radial glow behind the content.

Ocean Glass Tooltipocean-glass-tooltip-5925Frosted tooltip with an ocean hairline and a real arrow, driven by data-attr — appears on focus as well as hover.

Ocean Glitch Splitocean-glitch-split-7831Headline with ocean channel copies screened over it that jitter apart every few seconds.

Ocean Glossary Popoverocean-glossary-popover-13623Dotted term in running text that opens a definition card rather than a one-line tip, with the headword repeated and a category line so it reads as an entry, not a hint.

Ocean Glow Orbocean-glow-orb-4419Breathing ocean sphere with a specular highlight and a wide ambient bloom.

Ocean Glyph Switchocean-glyph-switch-11463Track carrying a tick and a cross drawn from borders, cross-faded so state is legible without relying on colour alone.

Ocean Gooey Buttonocean-gooey-button-13943Metaball effect from blur plus extreme contrast on a shared layer, so the two satellites stretch a liquid neck as they separate instead of simply moving apart.

Ocean Gradient Border Card (Slate)ocean-gradient-border-card-slate-0920Slate card with an animated ocean gradient border that shifts continuously.

Ocean Gradient MD Buttonocean-gradient-md-button-0112Diagonal ocean gradient that slides across on hover, with lift and shadow.

Ocean Gradient Ring Buttonocean-gradient-ring-button-4983Ghost button with a true 1px ocean gradient border — masked, so every corner radius stays clean.

Ocean Gradient Text (MD)ocean-gradient-text-md-1016Static ocean gradient text via background-clip.

Ocean Gradient Toastocean-gradient-toast-3929Solid ocean toast that drops in with a spring and keeps a blinking status dot.

Ocean Grain Cardocean-grain-card-5233Ocean gradient card with an inline SVG noise overlay — the fix for gradient banding on 8-bit displays.

Ocean Grainy Auroraocean-grainy-aurora-5481Slow-drifting ocean light pools under a grain layer — the current default for dark hero sections.

Ocean Grid Popocean-grid-pop-14103Tiles keyed off row plus column rather than index, so the entrance sweeps diagonally from the top-left corner instead of running along each row in turn.

Ocean Grouped Columnsocean-grouped-columns-6667Two-series comparison chart in ocean; bar heights are a --h custom property, so the markup carries the data.

Ocean Grouped Rowsocean-grouped-rows-13463Collapsible group headers carrying their own subtotal, tinted across the row so a header never gets mistaken for data, with children indented under a disclosure caret.

Ocean Hairline Gradient Ringocean-hairline-gradient-ring-6123The modern gradient border: painted on a pseudo-element and masked to a 1px ocean ring, so the radius stays true.

Ocean Half Gaugeocean-half-gauge-9131Semicircular dial built from one conic gradient masked by an inner arc, with the reading in tabular figures so it holds still as it changes.

Ocean Halftone Screenocean-halftone-screen-12343Repeating dot mask over a gradient, the cell size growing on hover so the screen coarsens the way a print separation would.

Ocean Halo Pillocean-halo-pill-11931Status chip sitting over a blurred copy of itself, the halo breathing on the same cycle as the dot so the two read as one pulse.

Ocean Hamburger Toggleocean-hamburger-toggle-7425Three ocean bars that fold into an X on click — one checkbox, no JavaScript.

Ocean Heart Likeocean-heart-like-7637Two rounded rectangles make the heart; checking it pops the shape and tints it ocean.

Ocean Heat Calendarocean-heat-calendar-9491Contribution grid filled column-first with `grid-auto-flow`, so weeks run down and the whole thing stays one flat list of cells.

Ocean Heat Gridocean-heat-grid-4841Contribution-graph style grid where ocean cells shimmer at different intensities.

Ocean Herringboneocean-herringbone-13291Two mirrored diagonal stripe fields butted at the centre line, which is the whole trick — herringbone is one hatch and its reflection sharing a seam.

Ocean Hexagon Tileocean-hexagon-tile-4681Six-sided ocean tile cut with clip-path that spins 30° on hover.

Ocean Histogram Rangeocean-histogram-range-13451Two-handle range sitting under a distribution of the values it filters, bars inside the selection lit and the rest left grey so the user can see where the results actually are.

Ocean Hold to Confirmocean-hold-to-confirm-9851Destructive action gated behind a press-and-hold fill driven by `:active`, so letting go before the sweep completes cancels it.

Ocean Honeycombocean-honeycomb-10663Hexagonal lattice from two offset radial gradients and a rule — a tiling CSS cannot draw directly, faked with half-cell offsets.

Ocean Hourglassocean-hourglass-14371Upper cone draining and lower cone filling on matched clip-path keyframes, the whole body turning over only once the sand has run through.

Ocean Hue Cycle Tileocean-hue-cycle-tile-7903Conic ocean tile walked through the full hue wheel by a single filter keyframe.

Ocean Icon Accordionocean-icon-accordion-11823Separated disclosure cards where the icon brightens and the chevron flips on open, both keyed off `[open]` rather than a toggled class.

Ocean Icon Pill (MD)ocean-icon-pill-md-3161Pill button with a pulsing dot indicator and ocean gradient body.

Ocean Icon Toolbarocean-icon-toolbar-11131Formatting cluster with a hairline separating groups, the alignment glyphs drawn from three background gradients rather than an icon font.

Ocean Icon View Tabsocean-icon-view-tabs-6419View-mode switcher with CSS-drawn icons and an ocean lit indicator on the selected mode.

Ocean Image Collageocean-image-collage-11731Asymmetric three-up where the hero spans both rows, each tile lifting independently so the grid never reflows on hover.

Ocean Indeterminate Barocean-indeterminate-bar-3519Loading bar with an unknown duration — an ocean segment sweeps across the track.

Ocean Indeterminate Parentocean-indeterminate-parent-13583Parent control in the mixed state its children actually put it in — the tick collapsed to a dash rather than swapped for a different glyph — with the tally spelled out beside it.

Ocean Infinity Loaderocean-infinity-loader-13063Single dot traced around a lemniscate in eight keyframe stations, crossing at the waist so the two lobes read as one continuous circuit rather than two orbits.

Ocean Inline Alertocean-inline-alert-9223Field-level message that says what is wrong and what to do about it, keyed by a thick left rule so it scans as attached to the input above.

Ocean Inline Edit Fieldocean-inline-edit-field-10891Value that reads as text until hovered, when a border and a pencil appear — the settings pattern that avoids a separate edit mode.

Ocean Inline Edit Gridocean-inline-edit-grid-13491Spreadsheet-style cells that outline under the pointer and drop into an editing state in place, so committing a value never costs a dialog or a round trip to a detail page.

Ocean Inset Glow Ringocean-inset-glow-ring-11651Selection state built entirely from stacked box-shadows — hairline, inner bloom and outer halo — so nothing about the element's size changes.

Ocean Iris Revealocean-iris-reveal-10731Cover layer collapsed to a zero-radius circle on hover, revealing the surface beneath from the centre out with no opacity crossfade.

Ocean Isometric Stackocean-isometric-stack-6471Three ocean plates floating in isometric projection, each drifting on its own offset.

Ocean Isometric Tilingocean-isometric-tiling-9383Four sheared gradients offset by half a tile into an interlocking cube lattice — one element, no SVG, and it tiles seamlessly at any size.

Ocean Kanban Skeletonocean-kanban-skeleton-13411Three-column board placeholder with uneven card heights and a per-column sweep delay, so the loading state carries the same ragged rhythm the real board will.

Ocean Keycap Buttonocean-keycap-button-13971Physical key with its travel in the shadow rather than the transform — the stem shortens as the cap descends, so the press bottoms out instead of sliding.

Ocean Kinetic Lettersocean-kinetic-letters-11223Characters riding one sine on a fixed phase offset, so the word ripples continuously instead of bouncing as a block.

Ocean Knockout Panelocean-knockout-panel-14383Solid panel multiplied over a moving field so white letterforms punch straight through to it — the type is a hole, not a fill, and the colour behind keeps drifting.

Ocean Labelled Dividerocean-labelled-divider-8111Flexbox "or" divider whose rules fade out from an ocean center — no fixed widths.

Ocean Labelled Meterocean-labelled-meter-3605Usage meter with a label row and an ocean tri-color fill that animates from zero.

Ocean Labelled Switchocean-labelled-switch-8903Track carrying its own ON and OFF words, cross-faded rather than translated, with a real checkbox behind it so it keeps focus and keyboard toggling.

Ocean Letter Cascadeocean-letter-cascade-8015Gradient-clipped headline whose letters drop in one at a time and lift individually on hover.

Ocean Level Badgeocean-level-badge-11423Rank chip whose ring is a conic gradient showing progress to the next tier, with the raw figures underneath in tabular numerals.

Ocean Light Coneocean-light-cone-14251Volumetric beam as a blurred trapezoid between an emitter and the ellipse it lands on, all three flickering together so the shaft and its pool stay tied.

Ocean Light Leakocean-light-leak-9783Blurred band swept across the frame in `color-dodge` with the label in `overlay`, so both react to what passes beneath them.

Ocean Lightboxocean-lightbox-9211Gallery overlay with prev/next controls and a thumbnail strip whose active frame is marked with an outline, so selection costs no layout.

Ocean Lightning Strikeocean-lightning-strike-14223Jagged bolt cut by clip-path and lit by stacked drop-shadows, driven on stepped keyframes so the discharge snaps between states the way a real strike does.

Ocean Line Riseocean-line-rise-12823Each line pushed up out of its own overflow-hidden track on a short stagger, which reads as type setting itself rather than as three blocks sliding in.

Ocean Liquid Loaderocean-liquid-loader-9891An oversized blob with a 42% radius spinning inside a circular clip, which turns a plain rotation into a rolling waterline.

Ocean List Row Skeletonocean-list-row-skeleton-8207Three placeholder rows — avatar, two text lines, trailing pill — sweeping ocean in sequence.

Ocean Loading Buttonocean-loading-button-7943Busy-state ocean button with an inline ring spinner and a breathing label.

Ocean Loading Veilocean-loading-veil-11771Blocking overlay scoped to one panel rather than the page, blurring the content behind so it is clearly still there but not interactive.

Ocean Locale Switcherocean-locale-switcher-13223Language menu listing each option in its own script rather than in the current one, with the ISO code trailing so the list stays scannable to someone who cannot read the endonym.

Ocean Location Pinocean-location-pin-9731Teardrop made from three rounded corners and one square one, floating over a shadow that shrinks as it rises so the lift reads as height.

Ocean Logo Marqueeocean-logo-marquee-7369Seamless logo ticker in ocean gradient type that pauses when you hover it.

Ocean Magnetic Link Chipocean-magnetic-link-chip-7733Pill link that lifts toward the cursor while its ocean arrow stretches forward.

Ocean Map Skeletonocean-map-skeleton-14663Loading state for a map view — tile grid, two roads at an angle and pulsing pin stubs — with the result card below carrying the usual sweep.

Ocean Marker Highlightocean-marker-highlight-9943Translucent bar swept behind a real `<mark>`, sitting slightly proud of the baseline so it reads as ink rather than a background box.

Ocean Masked Gradient Textocean-masked-gradient-text-9423Oversized gradient clipped to the glyphs and slid across them, with a white stop so a highlight travels through the letterforms.

Ocean Masked Ring Loaderocean-masked-ring-loader-7967Conic ocean sweep punched into a ring by a radial mask — one element, no border tricks.

Ocean Media Cardocean-media-card-6245Editorial thumbnail with a grain-textured ocean image, bottom scrim and eyebrow tag — swap the gradient for an <img>.

Ocean Mega Menuocean-mega-menu-8811Dropdown panel opening on hover and on `:focus-within`, so it is reachable by keyboard, with `visibility` transitioned so it is not tabbable while faded out.

Ocean Mention Autocompleteocean-mention-autocomplete-13023Composer that switches to name-matching the moment an at-sign is typed, the partial token tinted in place and the handle right-aligned so the list scans as one column.

Ocean Mention Toastocean-mention-toast-13743Social notification carrying who, what they said and two ways to respond, sized so the quoted line can wrap without pushing the actions off the card.

Ocean Menu Curtainocean-menu-curtain-10463Full-bleed navigation whose links rise on a stagger, with the siblings dimming on hover so the pointed-at item is the only bright one.

Ocean Mesh Gradientocean-mesh-gradient-8703Three heavily blurred blobs drifting on unequal periods, so the field never visibly loops back to where it started.

Ocean Milestone Trackocean-milestone-track-12063Roadmap where the current stage fills only half its connector, so "in progress" is visible on the rail rather than only in the node styling.

Ocean Morphing Blobocean-morphing-blob-4709Organic ocean blob that continuously reshapes itself through border-radius keyframes.

Ocean Morphing Dotsocean-morphing-dots-5157Three ocean dots swelling in sequence — the quietest loader that still reads as motion.

Ocean Multi Comboboxocean-multi-combobox-12143Chips, a typeahead and an option list in one control, the menu opening on `:focus-within` so it survives tabbing into the field.

Ocean Needle Dialocean-needle-dial-14583Analogue gauge whose needle overshoots its reading and settles back, the small correction being what separates an instrument from a bar drawn in a circle.

Ocean Neon Arrow Signocean-neon-arrow-sign-10623Three chevrons lighting in sequence beside a glowing label, the arrows drawn from two borders so each is a single element.

Ocean Neon Horizonocean-neon-horizon-10651Retro grid receding under a glowing sun, scrolled by exactly one cell so the loop is seamless and the lines appear to run forever.

Ocean Neon Level Meterocean-neon-level-meter-9371Six lit bars scaled from their base on a rolling delay, brightening at the bottom of the travel so the glow pumps with the motion.

Ocean Neon Outline Buttonocean-neon-outline-button-9343Hollow tube that floods on hover, with the fill cross-faded behind the text so the label never reflows as the state changes.

Ocean Nested Stepsocean-nested-steps-14823Two-level plan where sub-tasks hang off a rail indented under their parent, each connected by a stub, so progress inside a phase is visible without expanding it.

Ocean Newton's Cradleocean-newton-s-cradle-14343Five pendulums where only the end pair moves and the middle three stay dead still, which is the whole illusion — momentum appears to pass through them.

Ocean Notched Legendocean-notched-legend-12623Fieldset-style frame where the label sits in a gap punched through the stroke, the notch made by matching the label background to the surface rather than by clipping.

Ocean Notched Sliderocean-notched-slider-10943Discrete tier picker with the stops cut into the track by a repeating gradient, so the notches are part of the rail and cannot drift out of line.

Ocean Notification Bumpocean-notification-bump-7761Bell that swings on hover while its ocean count badge pops in over the corner.

Ocean Notification Cardocean-notification-card-11211Inbox rows where unread state is carried by a left rail, a faint tint and a dot at once, so it survives being skimmed at any zoom.

Ocean Now Playingocean-now-playing-14011Player row where the level meter runs on negative animation delays, so the twelve bars start mid-cycle and never line up into a visible wave.

Ocean Number Stepperocean-number-stepper-10023Quantity control with the field flanked by its own increment buttons, in tabular figures so the box does not resize between 9 and 10.

Ocean Numbered Stepperocean-numbered-stepper-9531Ordered list where the connector belongs to the step behind it, so a completed leg fills without any element spanning two items.

Ocean Offset Frameocean-offset-frame-9091A dashed box over a solid one offset behind it; on hover the two close the gap, so the whole thing reads as pressing down.

Ocean Option Tileocean-option-tile-10211Plan picker where the whole card is the label and the radio dot scales in on an overshoot, so the selection has weight without a layout change.

Ocean Orbit Loaderocean-orbit-loader-8611Three ocean satellites parked at 120-degree intervals and rotated as one group, so the ring keeps its spacing at any speed.

Ocean Ornament Dividerocean-ornament-divider-12811Three lozenges at the centre of a pair of rules that taper into the surface, the middle one turning half a revolution on hover while the flankers hold still.

Ocean OTP Code Inputocean-otp-code-input-7039Six-box verification code field with an ocean caret and a lift on the focused digit.

Ocean Outline Fill Textocean-outline-fill-text-9971Hollow display type with a filled copy in `::after` reading the same string from `data-text`, wiped in on hover so the two never disagree.

Ocean Page Turnocean-page-turn-11863Leaf hinged on the spine and swept through 180 degrees, darkening as it passes edge-on so the sheet reads as having two sides.

Ocean Paginationocean-pagination-10091Page links with an elided middle and tabular numerals, so widths stay even from page 2 to page 18 and the control never reflows.

Ocean Parallax Sceneocean-parallax-scene-10611Four layers shifted by different amounts on hover, blur increasing with distance so the depth cue is optical rather than just positional.

Ocean Password Revealocean-password-reveal-13051Masked field whose eye control drops its strike-through by scaling the bar to nothing from the centre, so the icon changes meaning without a second glyph swapping in.

Ocean Password Strengthocean-password-strength-7091Password field with a four-segment ocean strength meter that fills left to right.

Ocean Paywall Gateocean-paywall-gate-14463Content fading under a gradient rather than cut off at a hard line, so the reader can see there is more without being able to read it — the fade is the argument.

Ocean Pending Switchocean-pending-switch-10183Toggle whose knob carries a spinner once flipped, for settings that persist over the network and are not actually on until the server says so.

Ocean Percentage Ringocean-percentage-ring-8583Determinate conic ring with the value printed in the middle in tabular figures, so the number does not jitter as it counts.

Ocean Permission Promptocean-permission-prompt-12491Consent bar in the shape a browser uses for it — origin under the ask, block and allow weighted differently, the whole thing sized to sit under an address bar.

Ocean Perspective Floorocean-perspective-floor-12383Ground plane laid flat under an 78-degree rotateX so the grid converges on a horizon, with the background position scrolling one cell per cycle to read as forward travel.

Ocean Phone Fieldocean-phone-field-14183Dial code chosen inside the field it prefixes rather than in a separate control, with the valid state marked at the trailing edge where the eye finishes the line.

Ocean Photo Fanocean-photo-fan-13783Three prints squared up as one pile that spread from a shared bottom pivot, so the fan opens like a hand of cards rather than sliding apart in parallel.

Ocean Pill Tabsocean-pill-tabs-4045Compact pill tab group; the active tab carries the ocean gradient and a matching shadow.

Ocean Pin Code Fieldocean-pin-code-field-8743Six single-character boxes that mark themselves filled with `:not(:placeholder-shown)`, so state comes from the value rather than a class.

Ocean Pinned Column Tableocean-pinned-column-table-9571Row headers frozen with `position: sticky` while the measures scroll, using a box-shadow as the divider so the seam does not scroll away.

Ocean Plasma Globeocean-plasma-globe-12943Filaments pinned to a pulsing core and swept through short arcs on mismatched cycles, each skewed as it travels so the discharge never looks like a rotating spoke.

Ocean Plus Gridocean-plus-grid-8447Crossing ocean rules forming a plus lattice, masked to fade at the edges and slowly panning.

Ocean Plus To Closeocean-plus-to-close-7579Floating ocean action button whose plus rotates into a close cross.

Ocean Polaroid Frameocean-polaroid-frame-10423Instant-photo mount tilted off-axis that straightens and develops on hover, the caption in monospace on the wide bottom margin.

Ocean Posterize Bandsocean-posterize-bands-12863Continuous gradient quantized into three tone steps by a multiplying repeating-gradient, the banding backing off on hover to show what was thrown away.

Ocean Power Buttonocean-power-button-13611IEC power glyph as the control itself, the broken ring and its stem lighting together and the housing picking up an ambient glow so the off state is unmistakably dead.

Ocean Prefixed Fieldocean-prefixed-field-9583Immutable prefix and input sharing one bordered wrapper, so the focus ring surrounds the whole control instead of half of it.

Ocean Presence Avatarocean-presence-avatar-8303Initials avatar inside a rotating ocean conic ring, with a pinging online dot.

Ocean Price Tagocean-price-tag-13891Retail swing-ticket silhouette — pointed left end cut by clip-path with a punched eyelet — tilting on hover as though hanging from the hole.

Ocean Priority Pennantocean-priority-pennant-12611Swallow-tail flag cut from a single clip-path, the notch shallowing on hover so the tag squares off as it is picked out of a list.

Ocean Prism Drumocean-prism-drum-12411Four labelled faces mounted around a shared axis at a quarter turn each, the drum rotating one detent on hover so the next word rolls up into place.

Ocean Product Cardocean-product-card-9903Commerce tile with a corner flag, price and rating on one baseline, and a full-width action — the four things a grid card has to carry.

Ocean Profile Cardocean-profile-card-8651Cover banner with an avatar pulled up over the seam by a negative margin, so the ring sits half on the gradient and half on the body.

Ocean Profile Popoverocean-profile-popover-8183Mention chip that opens an ocean-edged profile card on hover or keyboard focus.

Ocean Profile Skeletonocean-profile-skeleton-10291Cover, overlapping avatar, name lines and a stat row, staggered top-down so the header reads as filling in rather than flashing at once.

Ocean Progress Cardocean-progress-card-12703Course-style tile that leads with how much is left rather than what it is, the meter animating to its real position once so a reduced-motion reader still sees 44 percent.

Ocean Progressive Loadocean-progressive-load-12503Blurred low-resolution stand-in sitting under the full image, the sharp layer fading over it and the status pill dropping out once there is nothing left to wait for.

Ocean Provider Buttonocean-provider-button-9823Full-width sign-in row with a square slot for the provider mark and a chevron that nudges on hover, sized so several stack without ragged edges.

Ocean Pull to Refreshocean-pull-to-refresh-13371Content sheet dragged down past its own top edge to expose a spinner parked behind it, the indicator scaling up from the gap rather than being pushed along by the sheet.

Ocean Quota Barocean-quota-bar-8283Multi-segment usage meter in ocean with a legend, each band growing in turn.

Ocean Quote Cardocean-quote-card-9931Testimonial with the opening mark hung outside the text block and clipped to a gradient, marked up as a real figure and blockquote.

Ocean Radar Chartocean-radar-chart-12743Six-axis spider plot where the web is one repeating-radial and one conic gradient, and the series is a single clip-path polygon that scales up from the centre as it plots.

Ocean Rain Cloudocean-rain-cloud-11011Cloud built from a pill and two circles inheriting its gradient, with three drops falling on a stagger so the rain never syncs into a row.

Ocean Rain Streaksocean-rain-streaks-12571Three repeating-gradient sheets falling at different rates and densities, the parallax between them doing the work that individual raindrop elements would otherwise cost.

Ocean Ranked Barsocean-ranked-bars-9463Three-column grid so labels, bars and values line up on their own axes, with widths as inline styles because the lengths are data.

Ocean Reaction Barocean-reaction-bar-11051Count chips that lift on hover with the one you have picked tinted and outlined, plus an add control drawn as two crossed bars.

Ocean Reaction Pickerocean-reaction-picker-11531Tray that floats above its trigger on hover or focus, each option popping on an overshoot so the row feels physical rather than a menu.

Ocean Reading Barocean-reading-bar-12211Progress rail stuck to the top of its own scroller, scaled rather than resized so the indicator animates without triggering layout.

Ocean Reading Progressocean-reading-progress-7151Sticky ocean progress bar driven by scroll-timeline — it tracks the scroll with no listener.

Ocean Redacted Textocean-redacted-text-11251Classified bars that wipe away from the right on hover, the words underneath present in the DOM the whole time so they stay selectable and searchable.

Ocean Release Listocean-release-list-12091Changelog entries with the version as a monospace tag, the latest highlighted so "what shipped most recently" is answerable without reading dates.

Ocean Removable Chipocean-removable-chip-5809Filter chip with a dismiss button that spins and fills ocean on hover.

Ocean Removable Tagsocean-removable-tags-8135Filter chips with a built-in × that spins on hover, filling ocean when the chip is active.

Ocean Resizable Columnsocean-resizable-columns-14743Grab handles straddling the header borders, each widening into a lit guide on hover — with fixed layout and ellipsis so a narrowed column truncates instead of reflowing.

Ocean Ribbon Badgeocean-ribbon-badge-8891Notched banner cut with `clip-path` and given a drop-shadow rather than a box-shadow, so the shade follows the arrow instead of boxing it.

Ocean Right Popover (MD)ocean-right-popover-md-2635Popover that slides in from the right with an ocean accent edge.

Ocean Ringing Bellocean-ringing-bell-12983Bell drawn from one rounded block plus a crown and a lip, pivoting at the mount while the clapper runs a second, later-peaking keyframe so the two do not move as one body.

Ocean Ripple Fieldocean-ripple-field-10011Four rings released a beat apart and eased out, so the pulse is continuous from four elements rather than a long single-ring loop.

Ocean Roadmap Milestonesocean-roadmap-milestones-6741Horizontal roadmap with an ocean rail and milestone nodes that pop in one after another.

Ocean Rotary Knobocean-rotary-knob-14863Hardware-style control turning through 240 degrees of its detent ring, the pointer riding the body so the value is read where the mark meets the ticks.

Ocean Rotating Cogocean-rotating-cog-14263Gear teeth as alternating conic stops with the disc centre masked away, the hub ring masked the opposite way — two elements, no path data, twelve teeth.

Ocean Rotating Cubeocean-rotating-cube-4271Six-faced cube in ocean colors, rotating continuously with real CSS 3D transforms.

Ocean Route Progress Barocean-route-progress-bar-6171The thin ocean bar that rides the top of the viewport during a route change — races ahead, then fades at 100%.

Ocean Sale Starburstocean-sale-starburst-10171Eight-point star made from two rounded squares at 45 degrees to each other — cheaper than a polygon and it keeps soft corners.

Ocean Saturation Splitocean-saturation-split-9811Two copies of one surface at different saturations, split by a clip-path handle that slides on hover — a before/after with no second asset.

Ocean Save Toggleocean-save-toggle-9743Bookmark flag drawn with a clip-path notch, springing up on an overshoot curve as the pill fills — one checkbox, no script.

Ocean Scale Fanocean-scale-fan-13263Interlocking arcs from two offset radial layers, the half-cell stagger doing the overlap that makes a scale pattern read as roofing rather than as rows of circles.

Ocean Scale-In Entrance (MD)ocean-scale-in-entrance-md-3013Ocean card that pops in from scale 0.6 → 1 with a spring easing.

Ocean Scoped Searchocean-scoped-search-11331Search bar with a leading scope menu and a trailing key hint, all three sharing one focus ring so the control reads as a single field.

Ocean Scramble Decodeocean-scramble-decode-13531Each slot holds a junk glyph and its real character stacked, swapping on a stepped keyframe left to right so the line resolves the way a cipher does rather than typing out.

Ocean Scroll Railocean-scroll-rail-9651Progress thumb riding a sticky rail beside scrolling copy, hiding the native scrollbar so the rail is the only indicator.

Ocean Scroll Reveal Stackocean-scroll-reveal-stack-7199Cards that fade and rise as they enter the scrollport, using view() — falls back to a plain fade-in.

Ocean Scroll Sentinelocean-scroll-sentinel-13343List whose last child is a loading marker rather than a button, positioned so it enters the viewport a little before the content runs out and the next page can be fetched.

Ocean Scroll Shadowsocean-scroll-shadows-14651Overflow cue as a tinted shadow at whichever edge still has content past it, which survives a patterned backdrop where a fade-to-transparent mask would not.

Ocean Scroll-Spy Dotsocean-scroll-spy-dots-7239Snap-scrolling pane beside an ocean dot rail that marks the section you're on.

Ocean Scrollable Tabsocean-scrollable-tabs-11851Overflowing tab strip with gradient masks at both ends, so a cut-off label reads as scrollable rather than as a rendering fault.

Ocean Search Morphocean-search-morph-10983Magnifier whose ring flattens into a bar and whose handle counter-rotates, turning the glass into a cross without swapping any element.

Ocean Security Shieldocean-security-shield-12291Shield outline made by clipping a filled shape and an inset dark copy to the same polygon, with a padlock drawn from two children.

Ocean Segmented Controlocean-segmented-control-8931Three exclusive options as real radios, so arrow keys move between segments — a row of buttons would need a Tab stop each.

Ocean Segmented Meterocean-segmented-meter-3577Five segments light up in sequence in ocean — good for multi-step or signal-strength meters.

Ocean Segmented Ringocean-segmented-ring-12651Dashed arc border built from a conic gradient rather than dash properties, masked to a hairline so the segments can carry three colours and still rotate as one piece.

Ocean Selectable Tableocean-selectable-table-10823Row selection with a bulk-action bar that replaces the header, and selected rows tinted so the count and the rows agree at a glance.

Ocean Semicircle Gaugeocean-semicircle-gauge-6639Half-dial score gauge in ocean, drawn from one conic gradient and cut to an arc with a radial mask.

Ocean Settings Switchesocean-settings-switches-14891Preference rows where the whole line is the target and the thumb stretches under the pointer before it travels, so the switch feels pressed rather than clicked.

Ocean Share Popoverocean-share-popover-14903Share sheet pairing a row of destination tiles with the raw link and its copy button, since the link is what most people were reaching for anyway.

Ocean Sheen Button (MD)ocean-sheen-button-md-4937Ocean CTA with a lit top edge and a highlight that sweeps across on a slow loop.

Ocean Sheet Stackocean-sheet-stack-13211Three bottom sheets pushed one behind the other, each narrower and dimmer than the one in front, so depth in the navigation stack is legible without a back label.

Ocean Shine Heading (MD)ocean-shine-heading-md-5295Hero headline with light travelling through the letters — background-clip: text over a moving ocean gradient.

Ocean Shortcut Tooltipocean-shortcut-tooltip-8943Hint showing its own key binding in real `<kbd>` elements, opening on hover and focus so the shortcut is discoverable from the keyboard too.

Ocean Side Drawerocean-side-drawer-9183Panel sliding in over a blurred scrim on a decelerating curve, so it settles rather than stopping dead at the edge.

Ocean Sidebar Groupsocean-sidebar-groups-14503Nav split by labelled section with the active row marked by a rail bleeding past the panel padding, so the indicator belongs to the sidebar rather than the item.

Ocean Sidebar Railocean-sidebar-rail-8783Vertical nav whose active marker grows from the centre out, so hover and selected read as the same gesture at two lengths.

Ocean Signal Barsocean-signal-bars-13331Five-step strength meter that lights bottom-up on a stagger and leaves the tallest bar dark, which is what four-of-five actually looks like on a device.

Ocean Signature Padocean-signature-pad-14211Signing surface with a dashed baseline and cross mark, the stroke revealed left to right by an animated inset clip so it draws rather than fades in.

Ocean Sketch Frameocean-sketch-frame-13903Wobbly ink frame from asymmetric elliptical border-radii doubled at an offset, the two strokes disagreeing just enough to read as drawn rather than computed.

Ocean Skill Barsocean-skill-bars-11691Labelled proficiency rows on a two-column grid so the name and the figure sit on one line with the track spanning both beneath.

Ocean Slant Transitionocean-slant-transition-11411Two bands with mirrored diagonal cuts meeting on one line, so the seam between sections is an angle rather than a horizontal rule.

Ocean Slide to Unlockocean-slide-to-unlock-12663Drag-track confirmation where the knob travels the full width and a tinted fill follows it, the prompt fading out once the gesture is past the point of being accidental.

Ocean Slider With Bubbleocean-slider-with-bubble-7297Gradient-filled range with an ocean value bubble and pointer sitting above the thumb.

Ocean Sliding Panelsocean-sliding-panels-13731Panels laid end to end on one track that translates by a third per tab, so switching moves horizontally instead of cross-fading in place.

Ocean Sliding Segmentsocean-sliding-segments-4069Segmented control with an ocean thumb that glides between the three options.

Ocean Slug Previewocean-slug-preview-14331Title field with the URL it will produce rendered underneath, domain greyed and slug highlighted, so the transformation is visible before anything is saved.

Ocean Snap Carouselocean-snap-carousel-7345Full-width ocean slide track with center snapping and a stretching active dot.

Ocean Snap Galleryocean-snap-gallery-10931Horizontal rail with `scroll-snap-align: center`, so tiles settle centred rather than flush left and the row never stops half-way.

Ocean Snap Railocean-snap-rail-7127Horizontal ocean card rail that snaps each tile to the left edge, scrollbar hidden.

Ocean Solarizeocean-solarize-14171Sabattier effect from an inverted copy composited with lighten, which flips only the tones the original leaves dark — the partial reversal a full invert cannot give.

Ocean Sortable Header Tableocean-sortable-header-table-6859Table headers that read as sortable — hover reveals the caret, the active column tints ocean.

Ocean Sparkline Areaocean-sparkline-area-4779Compact ocean area sparkline shaped entirely by a clip-path polygon.

Ocean Sparkline Cardocean-sparkline-card-8623Metric tile with a delta pill and an eight-bar sparkline drawn in CSS, so the trend needs no charting library and no SVG.

Ocean Sparkline KPIocean-sparkline-kpi-8495Metric tile with a clip-path area sparkline fading from ocean into the card.

Ocean Sparkline Tableocean-sparkline-table-12103Trend column drawn inline per row, so direction and current value sit on the same line instead of in a chart somewhere else on the page.

Ocean Speech Bubbleocean-speech-bubble-7507Chat bubble with a border-drawn tail on an ocean gradient fill.

Ocean Speed Dialocean-speed-dial-11103Floating action whose plus rotates into a cross while three satellites fan out along a quarter arc, each on its own translate.

Ocean Spinning Pyramidocean-spinning-pyramid-11891Four CSS triangles hinged at a shared base and splayed by quarter turns, tilted so the solid closes rather than reading as loose fins.

Ocean Spinning Ring Avatarocean-spinning-ring-avatar-3685Avatar wrapped in a rotating ocean conic ring — the "story" ring pattern, in pure CSS.

Ocean Split Badgeocean-split-badge-13863Two-cell status badge with a neutral key against a coloured value, the pairing that makes a wall of these scannable down the value column alone.

Ocean Split Buttonocean-split-button-8543Primary action joined to its own caret segment by an inset rule, so the dropdown half is a separate target rather than a wider button.

Ocean Split Flapocean-split-flap-14783Departure-board character cells split across a hinge, the top leaf folding forward on a stagger so the row clatters through left to right.

Ocean Spotlight Cardocean-spotlight-card-5245Feature card that lights an ocean spotlight behind its top edge on hover — no pointer tracking, no JavaScript.

Ocean Spotlight Overlayocean-spotlight-overlay-3883Product-tour spotlight: everything dims except a breathing circular cutout over the ocean surface.

Ocean Spotlight Revealocean-spotlight-reveal-7931Dimmed ocean image with a soft-light spotlight drifting across it; hover lifts the whole frame.

Ocean Spring Dialog (MD)ocean-spring-dialog-md-3833Alert dialog that springs in past its final size, topped with an ocean badge.

Ocean Squiggle Underlineocean-squiggle-underline-14811Wavy rule from two offset arc gradients rather than a wavy text-decoration, which keeps the amplitude and the two colours under direct control at any font size.

Ocean Squircle Frameocean-squircle-frame-13103Superellipse approximated with a 28-point clip-path, which holds its continuous curvature under scale in a way a border-radius corner visibly does not.

Ocean Stacked Areaocean-stacked-area-10743Two series cut from gradients with `clip-path` over repeating gridlines, so the plot needs no SVG path and still has real axis labels.

Ocean Stacked Usage Barocean-stacked-usage-bar-6199Storage-breakdown bar in ocean with a legend — segments grow left-to-right in sequence.

Ocean Staggered Checklistocean-staggered-checklist-8231Checklist rows sliding in from the left on a per-item delay, each with an ocean dot.

Ocean Staggered Listocean-staggered-list-6075List whose rows arrive 100ms apart with ocean markers — stagger by nth-child, no animation library.

Ocean Star Ratingocean-star-rating-9771Row reversed in flex so a plain sibling combinator lights every star to the left of the pointer — the trick that makes hover ratings work in pure CSS.

Ocean Star Tileocean-star-tile-14411Ten-point clip-path polygon over a conic fill, so the highlight sweeps around the points as the shape turns rather than rotating with them.

Ocean Starburst Badgeocean-starburst-badge-7555Two clipped ten-point stars offset into an ocean sale burst that twists on hover.

Ocean Starfield Driftocean-starfield-drift-8039Two parallax star layers over an ocean horizon glow, drifting at different speeds.

Ocean Status Cell Tableocean-status-cell-table-6835Spaced-row table with ocean status pills in the trailing cell.

Ocean Step Progress Barocean-step-progress-bar-9103Segmented track with nodes at each boundary, the current leg half-filled and its node pulsing — progress and position in one control.

Ocean Sticky Buy Barocean-sticky-buy-bar-9623Price and action pinned to the top of a scrolling pane with negative margins cancelling the padding, so the blur runs edge to edge.

Ocean Sticky Contentsocean-sticky-contents-12183Document outline pinned beside scrolling body copy, the active entry marked by a coloured left rule so the position reads without a filled background.

Ocean Sticky Header Tableocean-sticky-header-table-6777Scrollable table whose header stays pinned, with an ocean scrollbar thumb.

Ocean Sticky Section Headersocean-sticky-section-headers-7175Grouped list whose ocean date headers stick and blur the rows sliding beneath them.

Ocean Stitch Dividerocean-stitch-divider-14091Saddle-stitch seam: a dashed rule offset by a coloured drop-shadow so each stitch appears to sit proud of the surface, shifting half a stitch on hover.

Ocean Story Ring Avatarocean-story-ring-avatar-9171Four-segment ring turning around the avatar while the face counter-rotates at the same rate, so the initials stay upright.

Ocean Stripes (diagonal)ocean-stripes-diagonal-1466Tight diagonal ocean stripe pattern via repeating-linear-gradient.

Ocean Stripes (vertical)ocean-stripes-vertical-1468Tight vertical ocean stripe pattern via repeating-linear-gradient.

Ocean Success Checkmarkocean-success-checkmark-7661Ocean confirmation ring that scales in, then snaps a border-drawn tick into place.

Ocean Success Toastocean-success-toast-11783Confirmation whose tick springs in from its own corner on an overshoot, so the mark lands rather than simply appearing.

Ocean Sunburst Raysocean-sunburst-rays-13851Repeating conic wedges anchored below the frame so only the upper fan is visible, turning slowly under a radial haze that keeps the hub from reading as a hard point.

Ocean Swatch Pickerocean-swatch-picker-10051Colour choices as real radios with selection drawn by `outline` rather than a border, so picking one costs no layout shift.

Ocean Swipe Actionsocean-swipe-actions-12331List row sliding aside to expose the actions parked behind it, the destructive option furthest out so it takes the longest travel to reach.

Ocean Swipe Deckocean-swipe-deck-14703Card thrown off to one side with rotation tied to its travel while the stack behind promotes itself a step, each layer taking the transform the one above just left.

Ocean Sync Arrowsocean-sync-arrows-13011Two gapped arcs cut from one conic gradient with border-drawn heads at each opening, the whole glyph spinning on an ease that speeds through the middle of each turn.

Ocean Tab Overflowocean-tab-overflow-12451Tab strip that stops at the width it has and parks the remainder behind a counted overflow button, the popover anchored to its top-right corner.

Ocean Table Skeletonocean-table-skeleton-8983Three placeholder rows whose sweeps are staggered by a tenth of a second, so the list reads as loading top-down instead of pulsing as one block.

Ocean Tag Inputocean-tag-input-8771Chips and a flexible field sharing one bordered box, with `:focus-within` lighting the whole container rather than just the input.

Ocean Task Strikeocean-task-strike-13171Checkbox and label treated as one gesture — the tick springs in, the rule draws left to right, and the text dims last so the sequence reads as completion rather than deletion.

Ocean Terrazzoocean-terrazzo-11971Seven elliptical chips at irregular positions inside one tile, sized differently so the repeat is much harder to spot than a regular grid.

Ocean Theme Toggleocean-theme-toggle-5867Two-position light/dark switch with an ocean thumb that springs between the sun and moon.

Ocean Thermal Mapocean-thermal-map-12371False-colour heat field from stacked radial gradients under an overlay scanline grid, with a monospace readout for the instrument look.

Ocean Thermometer Meterocean-thermometer-meter-11663Vertical gauge with a scale beside it, the column anchored to the bottom so it fills upward the way a reading actually behaves.

Ocean Thread Skeletonocean-thread-skeleton-11571Comment placeholders with a nested reply indented behind a rule, so the shape of the conversation is visible before any text arrives.

Ocean Three-Way Segmentocean-three-way-segment-8159Light / Auto / Dark segmented control with an ocean pill that springs between radios.

Ocean Ticket Notchocean-ticket-notch-6599Coupon/ticket shape with circular bites cut from both edges — two radial masks intersected, no SVG.

Ocean Ticket Stubocean-ticket-stub-8471Two radial masks bite notches out of an ocean ticket, with a dashed tear line between halves.

Ocean Tilt Card (MD)ocean-tilt-card-md-4197Ocean card that tilts in 3D space on hover and throws its shadow to the side.

Ocean Toast Stackocean-toast-stack-6327Three toasts collapsed into a depth stack with the newest in front — the sonner-style notification pile, in ocean.

Ocean Topographic Contoursocean-topographic-contours-4587Contour-map rings in ocean tones, slowly expanding like a breathing landscape.

Ocean Torn Edgeocean-torn-edge-10103Scalloped seam cut by two offset radial repeats, so the notches interlock into a torn edge rather than a row of even semicircles.

Ocean Traced Border Buttonocean-traced-border-button-8571An ocean conic gradient rotating behind a solid inset face, so only the two-pixel rim reads as light travelling around the edge.

Ocean Transfer Toastocean-transfer-toast-10503Background-job notice carrying a spinner, a bar and a numeric read-out, so the same toast covers both indeterminate and measured phases.

Ocean Transport Controlsocean-transport-controls-7483Play, pause and stop glyphs cut from borders on ocean gradient discs.

Ocean Tree Disclosureocean-tree-disclosure-10543Nested `<details>` forming a file tree, with indentation from the nesting itself so any depth works without new rules.

Ocean Treemapocean-treemap-14051Share-of-total as nested area rather than length, sized with fractional grid tracks so the proportions are declared once and the tiles re-solve at any width.

Ocean Tri-Color Dividerocean-tri-color-divider-2113Three-segment divider with end dots using the ocean palette.

Ocean Triangle Tessellationocean-triangle-tessellation-14571Equilateral tiling from four 60-degree gradient layers on a half-cell offset, the 59px row height being what keeps the triangles equilateral rather than merely pointy.

Ocean Trophy Iconocean-trophy-icon-12263Cup, stem and plinth as three elements with the handles as mirrored pseudo-elements, so the whole award is drawn without an image.

Ocean Typewriter Textocean-typewriter-text-8663Width stepped in whole characters with `steps()` and a caret blinking on its own cycle, so the cursor keeps ticking while the text is paused.

Ocean Typing Indicatorocean-typing-indicator-11143Chat bubble with a clipped tail and three dots bobbing on a rolling delay, resting for most of the cycle so it does not read as frantic.

Ocean Underline Grow (MD)ocean-underline-grow-md-1679Minimal input whose ocean underline grows from left on focus.

Ocean Underline Keylineocean-underline-keyline-11623Rule that draws left-to-right on enter and retracts to the right on leave, by flipping `transform-origin` between the two states.

Ocean Underline Navocean-underline-nav-1945Inline nav with active item marked by an ocean gradient underline.

Ocean Underline Reveal (MD)ocean-underline-reveal-md-1234Link text whose ocean gradient underline grows in from the left on hover.

Ocean Undo Toastocean-undo-toast-9251Confirmation carrying its own reversal, with a timer bar draining by `scaleX` so the countdown animates on the compositor rather than on width.

Ocean Unfold Expandocean-unfold-expand-11583Height animated with `grid-template-rows` from 0fr to 1fr — the one technique that transitions to intrinsic height without a hardcoded max-height.

Ocean Upload Loaderocean-upload-loader-9863File row with a CSS-drawn dog-eared document and a bar that eases as it fills, so the last stretch reads slower the way a real transfer does.

Ocean Upload Ringocean-upload-ring-12531Profile photo wrapped in a conic progress ring that fills as the upload lands, with a camera affordance notched out of the lower-right corner.

Ocean Validation Statesocean-validation-states-7063Paired valid / invalid fields with inline messages, glyphs and matching focus rings in ocean.

Ocean Variable Weightocean-variable-weight-13503Letters travelling from light to heavy on a per-character delay, picking up a vertical gradient as they thicken so the wave of weight is also a wave of colour.

Ocean Verified Badgeocean-verified-badge-10143Scalloped seal cut with an eighteen-point `clip-path` and a tick drawn from two borders, so the whole mark is one element and no SVG.

Ocean Vertical Dividerocean-vertical-divider-10131Column separator whose label runs with the rule via `writing-mode`, so the text rotates without a transform that would break its box.

Ocean Vertical Sliderocean-vertical-slider-12223Level control filling upward with the handle anchored to the fill's top edge, so value and thumb cannot drift apart at any height.

Ocean Vertical Tabsocean-vertical-tabs-8375Side tab rail with a glowing ocean indicator that travels between sections.

Ocean Vertical Testimonial Tickerocean-vertical-testimonial-ticker-7397Quotes scrolling upward behind a top-and-bottom fade, in ocean accent rules.

Ocean Video Modalocean-video-modal-14491Lightbox carrying real player chrome — scrubber, elapsed over total — under a blurred scrim, so the dialog reads as a player rather than a framed image.

Ocean Video Skeletonocean-video-skeleton-14691Placeholder holding a 16:9 stage with an inert play glyph over a scrubber and two metadata lines, so the layout does not shift when the real player mounts.

Ocean Vote Pairocean-vote-pair-11023Up and down controls sharing one arrow drawn from a block and a triangle, the down variant just the same shape rotated.

Ocean Waterfall Chartocean-waterfall-chart-12771Bridge from one period total to the next, each floating bar offset by the running balance beneath it and connected by dashed leader lines so the arithmetic is visible.

Ocean Wave Bandsocean-wave-bands-9983Three oversized near-circles rotating at different rates and directions, which reads as overlapping swells rather than three spinning discs.

Ocean Wave Dividerocean-wave-divider-14063Sine edge assembled from two alternating circle masks rather than an SVG path, the pair scrolling one full period so the crests travel without the band moving.

Ocean Wave Shimmerocean-wave-shimmer-6017Media placeholder with a single ocean highlight crossing it — transform-only, so it stays on the compositor.

Ocean Wave Shimmer (MD)ocean-wave-shimmer-md-2867Skeleton bars with an ocean gradient wave sweeping across.

Ocean Wavy Edgeocean-wavy-edge-10703Section whose bottom is scalloped by a repeating radial mask, so the wave is cut out of the element rather than covered by a shape on top.

Ocean Weather Cardocean-weather-card-13983Current conditions weighted large over a four-day strip, the whole panel tinted by the same hue as the sun mark so the card reads as one sky rather than a chart.

Ocean Wifi Arcsocean-wifi-arcs-14291Three nested rings showing only their top border and rotated 45 degrees, which turns a circle into the quarter-arc the signal glyph is actually made of.

Ocean Wipe Entranceocean-wipe-entrance-9023Container revealed by an inset clip while the label lifts on its own curve, so the box and its contents arrive a beat apart.

Ocean Wireframe Globeocean-wireframe-globe-13691Five circles sharing a centre at even yaw offsets, which reads as a meridian cage once the whole group rotates — no sphere primitive required.

Ocean Wizard Headerocean-wizard-header-11371Segmented flow header where each step's arrow is a rotated square inheriting its own background, so the notch always matches the segment behind it.

Ocean Wizard Stepperocean-wizard-stepper-8519Four-step wizard with completed ticks, a pulsing current step and ocean connector rails.

Ocean Word Rotatorocean-word-rotator-8691A stack of words rolled behind a one-line window, holding on each long enough to read before the next snaps up.

Ocean Woven Textureocean-woven-texture-9411Two opposed diagonal repeats crossing into a basket weave, drifting against each other so the surface shimmers without any element moving.

Ocean X-Ray Sweepocean-x-ray-sweep-12891Inverting backdrop-filter revealed by an animated inset clip, with a lit scan edge riding the boundary so the wipe reads as an instrument passing over the plate.

Ocean Zebra Tableocean-zebra-table-6753Striped data table with an ocean gradient header and a tinted row hover.

Ocean Zigzag Dividerocean-zigzag-divider-12783Sawtooth rule cut with a repeating conic mask rather than drawn as triangles, so the tooth pitch is one background-size value and widens on hover.

Ocean Zoom Caption Tileocean-zoom-caption-tile-3709Image tile that zooms under a darkening scrim while the caption slides up — swap the gradient for your own <img>.

Ocean Zoom Tile (Slate)ocean-zoom-tile-slate-1767Slate framed tile whose ocean content zooms in on hover.

Odometer Counter Meterodometer-counter-meter-15895Running total shown on a mechanical counter — five digit wheels behind a shaded bezel, the four higher ones holding their reading while the red units wheel turns continuously through a strip that ends on a duplicate zero so the loop never jumps.

Offset Twin Buttonoffset-twin-button-14953A solid twin layer sits offset behind the outline and snaps flush underneath it on hover.

Ornate Corner Frameornate-corner-frame-15615Double-ruled plate with flourished corner pieces finished by a bead, the corners drawing further along the rules on hover.

Outline Fill Blue MD Buttonoutline-fill-blue-md-button-0214Outline blue button that fills from left to right on hover.

Overflow Tag Groupoverflow-tag-group-15869Truncated tag list where the +3 counter is not just a count: hovering the group collapses the counter to nothing and unrolls the three hidden tags out of the same space one after another, each widening from zero.

Overflow Tags Popoveroverflow-tags-popover-15701Issue card whose label row ends in a plus-four counter; hovering the row lifts a popover that names the four labels which did not fit, each with its colour dot.

Padlock Togglepadlock-toggle-15087A grey padlock whose shackle lifts and swings open, turning the body emerald when unlocked.

Padlock Unlock Iconpadlock-unlock-icon-15787A brass padlock whose shackle lifts and swings open about its right hinge on hover while the body turns green to confirm the unlock.

Paged Tablepaged-table-15533Invoice rows closed off by a footer that states the visible range and offers numbered pagination with the current page filled.

Paper Plane Send Iconpaper-plane-send-icon-15789A two-tone paper dart clipped from a gradient, which darts up and to the right on hover while three speed dashes settle into place behind it.

Parallax Depth Scrollerparallax-depth-scroller-15905Three ridge layers and a sun pinned behind the copy, each one driven by the scroller’s own scroll timeline at a different rate, so the near ridge travels five times further than the far one as the article moves over them.

Pareto Combo Chartpareto-combo-chart-15799Causes ranked as descending bars with a cumulative percentage line running across them and a dashed eighty percent rule marking where the vital few end.

Particle Driftparticle-driftSixty-four particles that draw a line when they come within range and lean toward the pointer. The links are the effect, and they are why this cannot be a shader.

Password Reveal Togglepassword-reveal-toggle-15341Clicking the eye flips masked dots up out of view and rolls the plain-text password into place, no JavaScript needed.

Password Rules Popoverpassword-rules-popover-15703Sign-up form whose password field drops a rules popover over the field below it, showing a four-segment strength meter and ticking off the requirements already met.

Peek Carouselpeek-carousel-15549Carousel that leaves a dimmed sliver of the neighbouring slides on show, with arrow controls fading in on hover.

Peel Corner Buttonpeel-corner-button-14969The top-right corner folds over like peeling paper on hover, revealing a bright under-layer.

Peeling Corner Tilepeeling-corner-tile-15677A card with a dog-eared corner that peels further back on hover, the folded flap turning over to show the pale reverse of the sheet while the teal saved-to-library mark filed beneath it is uncovered.

Peer Desaturate Strippeer-desaturate-strip-15859Filmstrip of colour cards where touching any one of them drains the colour out of every other card and dims it, while the card under the cursor gains saturation and contrast and steps forward.

Perforated Tear Buttonperforated-tear-button-15633Voucher button whose lower stub is joined by a dotted perforation and folds away on a hinge when hovered, uncovering the redeemed bar printed beneath it.

Perforated Ticket Borderperforated-ticket-border-15129Dashed border with a punched perforation line and semicircular notches, so the stub reads as tearable.

Perspective Crawlperspective-crawl-15207Orange opening-crawl text tilted back into the distance scrolls away from the viewer and holds still on hover.

Perspective Phoneperspective-phone-15203A phone mockup resting at a three-quarter angle that rotates flat to face you on hover while its screen content slides in.

Pin Snap Togglepin-snap-toggle-15573Pin chip whose tack swings upright and turns gold when pinned, the whole chip picking up the same amber outline.

Ping Ripple Loaderping-ripple-loader-14995Concentric rings ripple outward from a glowing center dot and fade as they reach the edge.

Pinned Note Cardpinned-note-card-15651Ruled paper note held by a single push pin, pivoting about the pin head as its transform origin so it swings past level and settles rather than tilting in place.

Piston Pump Loaderpiston-pump-loader-15645Crank-slider engine in miniature: an amber flywheel turns a pin, the connecting rod swings and slides with it, and the piston strokes back and forth inside its cylinder.

Pivot Totals Tablepivot-totals-table-15525Cross-tab of regions against quarters with a tinted totals column and totals row meeting at the grand total.

Pixel Dissolve Buttonpixel-dissolve-button-15359Outline button whose fill materialises as a coarse dot grid that steps down to a solid block, like a low-resolution image resolving.

Plasma Fieldplasma-fieldFour interfering sine waves coloured by their own interference. About fifteen instructions a pixel, which makes it the cheapest full-bleed background here.

Plasma Orbplasma-orbA sphere with a turbulent surface, a fresnel rim and a halo that fades into the page rather than into a black square. Leans toward the pointer.

Play Pause Morphplay-pause-morph-15325A play triangle built from two clipped halves that separate and square off into a pause icon on hover.

Play Row Equalizerplay-row-equalizer-15575Track row where the index number fades out on hover and three bouncing equaliser bars take its place.

Plus Lighter Crossfadeplus-lighter-crossfade-15857Two artwork plates dissolve back and forth in plus-lighter blending, so instead of the usual muddy dip in the middle the overlap adds light and the halfway frame is the brightest one; hovering pauses the dissolve wherever it stands.

Polar Rose Chartpolar-rose-chart-15797Eight equal-angle petals drawn from the centre, each reaching a different radius over faint guide rings so the values read as a rose rather than a row of bars.

Population Pyramid Chartpopulation-pyramid-chart-15793Age bands stacked around a centred label column, with one bar growing left and one growing right so the two populations can be compared band by band.

Presence Toastpresence-toast-15187A pill toast with an overlapping avatar cluster that fans apart on hover to announce who just joined.

Pricing Cards Skeletonpricing-cards-skeleton-15607Three-tier pricing placeholder with the middle card raised and outlined the way a recommended plan usually is.

Process Cycle Ringprocess-cycle-ring-15519Four stage pills pinned around a dashed circle with a coloured arc orbiting it, for a process that never really ends.

Product Detail Skeletonproduct-detail-skeleton-15881Product page placeholder holding its real shape — hero image over a thumbnail strip on the left, title lines, a rating row, a green price block, size chips and a full-width buy bar on the right.

Progress Fill Tagprogress-fill-tag-15079Teal status tag whose background doubles as a 72% progress bar and completes on hover.

Pull Chain Light Switchpull-chain-light-switch-15691A ceiling lamp with a beaded pull chain that stretches downward when you take hold of it, lighting the bulb to amber and dropping a soft cone of light onto the floor below.

Punched Ledger Framepunched-ledger-frame-15889Panel framed as a page torn from a binder — three punched holes cut down the left edge from one stacked box-shadow, a red margin rule beside them and faint horizontal rules across the plate, sliding free of the rings on hover.

Push Detail Stackpush-detail-stack-15685A master list that slides a short way left and dims as the detail panel it points at pushes in from the right edge with a back chevron, the two levels moving together like a phone navigation stack.

Puzzle Piece Tilepuzzle-piece-tile-15495Two jigsaw halves — one with a knob, one with the matching socket cut out by a radial mask — that pull apart on hover.

Quadrant Assemble Entrancequadrant-assemble-entrance-15707Four coloured tiles spin in from the corners one after another and lock together into a two-by-two logo mark, after which the wordmark slides in beside it.

Quadrant Scatterquadrant-scatter-15501Two-by-two scatter plot with crosshair axes and a tinted winning quadrant, points swelling under the cursor.

Quantity Odometer Stepperquantity-odometer-stepper-15841Quantity stepper whose figure lives on a vertical strip, so pointing at plus or minus rolls the next number up into the window like an odometer wheel before you have even clicked.

Quantity Stepper Buttonquantity-stepper-button-15635Single add-to-cart button that rearranges its own layout on hover: the label collapses to nothing while a minus key, a count and a plus key grow out of the ends to form a stepper.

Quantity Stepper Fieldquantity-stepper-field-15289Number input flanked by minus and plus caps that fill with the accent when hovered.

Quilted Paddingquilted-padding-15767Padded upholstery in which two crossing stitch lines cut the surface into diamonds and every diamond swells with its own highlight and shadow.

Quota Warning Alertquota-warning-alert-15453Amber alert carrying its own usage meter, the fill gently throbbing to show how little of the allowance is left.

Radar Sweep Loaderradar-sweep-loader-14989A green radar scope with a rotating sweep beam that lights up two blips as it passes over them.

Radial Bloom Shimmerradial-bloom-shimmer-15605Text placeholder lit by a highlight that blooms outward from the centre of the card rather than sweeping across it.

Radial Dots Meterradial-dots-meter-15145Twelve dots arranged on a ring with eight lit clockwise around a fraction readout; hover previews the ninth.

Radial Fan Entranceradial-fan-entrance-15429Coloured chips swing out one after another from behind a central button, arriving on an arc above it.

Radial Fan Menuradial-fan-menu-15047A fuchsia hub button that spins into an X while four actions fan out along an arc on hover.

Rail Scroll Barrail-scroll-bar-15625Horizontal card rail with a slim gradient scrollbar of its own beneath it, sized to the rail rather than the page.

Range Slider Fieldrange-slider-field-15043Labelled range input with a violet filled track and a thumb that swells with a soft halo on hover.

Ransom Note Textransom-note-text-15383Each letter is its own pasted scrap with a different typeface, paper colour and tilt, all re-shuffling on hover.

Rate Limit Alertrate-limit-alert-15733Throttling notice showing the allowance as ten discrete tokens rather than a bar, each pip flashing bright as it drops back into the bucket one at a time.

Rating Prompt Modalrating-prompt-modal-15169A centred rate-us dialog whose five grey stars light up amber one after another when hovered.

Rating Stars Inputrating-stars-input-15033Five-star radio rating where hovering previews the score and clicking locks it in, no JavaScript.

Receipt Cardreceipt-card-15375Paper till receipt in monospace with dashed rules, a totals line and a zigzag torn edge cut into the bottom by a mask.

Ribbon Toolbar Tabsribbon-toolbar-tabs-15743Office-style ribbon where each tab swaps the strip below for a different captioned group of tool buttons, and every button lifts slightly as it is pointed at.

Ring Chain Dividerring-chain-divider-15059Emerald rings strung evenly along a thin rule, like links on a chain.

Ring Step Dialring-step-dial-15265Circular progress dial split into step arcs with a centre count, where hover previews the next arc lighting up.

Ripple Gridripple-gridA lattice of dots swelling with two waves — a slow one from the centre and a tight ring that arrives with the pointer. Each dot samples at its own cell, so it stays a grid.

Ripple Ring Patternripple-ring-pattern-15227Two sets of concentric sky-blue rings overlap like raindrops on water, brightening on hover.

Rocker Switchrocker-switch-15081Physical O/I rocker switch that tips over in perspective and lights its orange side when checked.

Rocker Switch Buttonrocker-switch-button-15637Hardware rocker sunk into a moulded socket that tips on a perspective from the O side to the I side, its face turning green as the switch takes the ON position.

Rocket Iconrocket-icon-15559Fin-and-porthole rocket over a flame that flickers continuously, the body lifting clear of the exhaust on hover.

Roll In Entranceroll-in-entrance-15431Panel that rolls in from the left, spinning almost a full turn before it settles level.

Roll Label Buttonroll-label-button-14947Button label rolls upward on hover and a second line of text rolls in from below.

Rolling Ball Loaderrolling-ball-loader-14993A patterned ball rolls back and forth along a rail, squashing briefly each time it hits an end.

Rope Twist Dividerrope-twist-divider-15065A rounded cord of alternating diagonal orange strands that reads as a twisted rope.

Rotating Hint Fieldrotating-hint-field-15403Search pill whose placeholder scrolls through example queries on a loop and dims out of the way once you focus it.

Row Action Reveal Tablerow-action-reveal-table-15823File rows whose size column slides away on hover as a strip of edit, download and delete buttons glides in from the right edge to take its place.

Row Reorder Tablerow-reorder-table-15821Stage rows carrying dotted grip handles, where pointing at one lifts it off the table with a shadow and drops a blue insertion line beneath it.

Rubber Stamp Textrubber-stamp-text-15663A ghost impression hanging above the page that slams down square on hover, snapping into focus as a hard inked mark with a distressed rubber texture masked across it.

Ruler Marker Timelineruler-marker-timeline-15267Horizontal tick ruler with month labels and a flagged marker that slides forward on hover.

Ruler Tick Dividerruler-tick-divider-15585Hairline rule graduated with minor ticks every ten pixels and a taller major tick every fifty, like the edge of a ruler.

Runway Lightsrunway-lights-15479Row of lamps that light in sequence toward a glowing chevron, like approach lights guiding the eye along the strip.

Safety Cover Switchsafety-cover-switch-15693A hazard-striped guard hinged along its top edge that swings up and away before the lever underneath can throw, at which point the lever rides to the top of its slot and the status lamp goes green.

Sawtooth Framesawtooth-frame-15609Panel edged with triangular teeth on all four sides, cut by four repeating conic masks the way a postage stamp is perforated.

Scallop Edge Dividerscallop-edge-divider-15061A section that ends in a row of scalloped half-circles trimmed with a rose edge.

Schedule Gridschedule-grid-15535Booking grid with resources down the side and hours across the top, each reservation drawn as a block spanning its slots.

Screen Blend Discsscreen-blend-discs-15345Three primary discs in screen blend mode that add up to white where they overlap, and drift apart on hover.

Screen Share Overlayscreen-share-overlay-15727Shared window ringed in pulsing green with a floating status pill that counts the elapsed time and widens on hover to reveal its microphone and camera toggles.

Scroll Spine Timelinescroll-spine-timeline-15907Delivery tracker whose spine fills from the scroller’s own scroll timeline while each milestone dot lights on its own view timeline as it crosses the dashed read line pinned across the pane.

Scroll Tint Readerscroll-tint-reader-15299Scroll box whose background tints from cool blue to warm rose as you scroll, driven purely by a scroll timeline.

Scroll To Accept Termsscroll-to-accept-terms-15839Licence text scrolling inside a fixed frame that fades out at its bottom edge, above a dimmed accept row whose disabled button explains on hover that the text must be read to the end.

Scrub Preview Thumbnailscrub-preview-thumbnail-15571Video card that steps through four preview frames while hovered, a thin scrub line filling along the bottom as it goes.

Section Dots Navsection-dots-nav-15053Full-page style side dots that stretch into a lime bar and brighten their numbered label on hover.

Section Number Dividersection-number-divider-15067Editorial divider with a bold lime section number, a rule that fades away, and a small caps label at the end.

Segment Bar Steppersegment-bar-stepper-15261Progress stepper made of pill segments where the next segment lights up and swells on hover.

Segment Thumb Previewsegment-thumb-preview-15843Segmented range control whose blue thumb slides under whichever label you point at, previewing the choice on an overshoot curve and settling back on the checked segment when the cursor leaves.

Segmented Choice Radiossegmented-choice-radios-15287Radio group styled as a segmented pill control where the checked option gets a filled, glowing thumb.

Segmented Radio Fieldsegmented-radio-field-15037Three-way segmented control whose emerald puck springs across to whichever radio option is chosen.

Selectable Avatarselectable-avatar-15163Avatar wrapped in a checkbox label that shrinks inside a solid ring and sprouts a check badge when selected.

Selection Toolbarselection-toolbar-15425Floating format bubble that pops above a highlighted phrase with bold, italic, underline, link and quote controls.

Send Planesend-plane-15565Send button whose paper plane launches up and out of the frame when pressed, the label giving way as it goes.

Sequence Diagram Stepssequence-diagram-steps-15809Two dashed lifelines with request arrows crossing between them in order, a solid arrow out, a dashed reply back, and an activation bar marking how long the server was busy.

Settings Accordionsettings-accordion-15465Grouped preference sections that open onto rows of switches, each header chevron flipping as its group expands.

Settings Modalsettings-modal-15447Two-pane settings dialog with a section rail on the left and the active pane on the right, fields and a switch included.

Seven Segment Displayseven-segment-display-15477Two seven-segment digits glowing green behind a dark bezel, with the unlit segments left faintly visible and an occasional flicker.

Share Sheet Modalshare-sheet-modal-15167A pale share sheet with a row of app targets rises over a dimmed page and its icons hop in sequence on hover.

Sheen Ocean MD Buttonsheen-ocean-md-button-0388Ocean gradient button with a diagonal light sheen that sweeps across on hover.

Shield Clip Tileshield-clip-tile-15493Gradient panel clipped to a six-point heraldic shield that scales up and casts a coloured drop shadow on hover.

Shortcut Overlayshortcut-overlay-15451Frosted cheatsheet panel listing keyboard shortcuts as keycaps, rows highlighting as the pointer runs down the list.

Shredded Textshredded-text-15661A printed sheet made of eight vertically clipped copies that sit in perfect register until hover, when the strips slide out of line at different depths and angles like paper through a shredder.

Shutter Split Entranceshutter-split-entrance-15433A panel closed by two lit shutters that part vertically, the heading tightening its letter-spacing as it appears behind them.

Sidebar Nav Skeletonsidebar-nav-skeleton-15603Navigation rail placeholder with a brand row and four icon-and-label rows of uneven width, one of them held as the active item.

Skeleton Loading Tableskeleton-loading-table-15819Real column headers over rounded grey placeholder bars of uneven length, a highlight sweeping across them on a stagger and speeding up while the pointer is over the table.

Skeleton Swap Entranceskeleton-swap-entrance-15711Loading card whose shimmering grey placeholder bars dissolve on cue and are replaced by the real avatar, name and badge rising a few pixels into place.

Skew Banner Buttonskew-banner-button-14971Esports-style slanted banner button that straightens and rounds off on hover.

Skew Ribbon Navskew-ribbon-nav-15051Slanted parallelogram tabs where the orange fill wipes out of the active tab and into the hovered one.

Skew Slide Entranceskew-slide-entrance-15125Panel rushes in from the left leaning into its motion, then straightens up as it stops.

Slate Card Skeleton (Norm)slate-card-skeleton-norm-2751Norm shimmering card placeholder blocks on a slate surface.

Slate Dense Grid (MD)slate-dense-grid-md-6899Monospace md data grid on a slate surface with full cell rules — for logs and console views.

Slate Text Skeleton (Norm)slate-text-skeleton-norm-2749Norm shimmering text placeholder blocks on a slate surface.

Sliced Text Shearsliced-text-shear-15247A word duplicated and clipped into top and bottom halves; on hover the halves shear apart in opposite directions.

Slide Row Menuslide-row-menu-15055Stacked menu rows where hovering sweeps a teal tint bar across the row and slides an arrow into place.

Slide To Confirm Switchslide-to-confirm-switch-15689A deliberate confirmation control whose knob has to travel the full length of the track, dragging a green fill behind it while the shimmering prompt gives way to the completed label.

Slider Value Tooltipslider-value-tooltip-15095Range slider whose thumb carries a sky-blue value bubble that lifts as the thumb grows on hover.

Sliding Door Buttonsliding-door-button-15357Button whose label splits at the centre and slides out to both sides like a pair of doors, revealing a second call to action behind it.

Sliding Tiles Loadersliding-tiles-loader-14985Three square tiles slide around a two-by-two grid, always leaving one empty slot like a sliding puzzle.

Sliding Tooltip Railsliding-tooltip-rail-15697Formatting toolbar served by a single tooltip pill that glides sideways to sit over whichever button the pointer reaches, swapping its label as it travels.

Slope Chartslope-chart-15507Before-and-after slope lines with a dot at each end, showing which series rose and which fell between two periods.

Slug Preview Fieldslug-preview-field-15831Title field with the published address mirrored underneath it, the slugged half highlighted inside a dashed strip and a copy button sliding over the end on hover.

Snake Grid Loadersnake-grid-loader-15367Three-by-three grid of tiles where a lit cell travels the outer ring, leaving a short glowing tail behind it.

Snap Page Stacksnap-page-stack-15301Vertical scroll box that snaps hard between full-height page panels, one section per scroll.

Snap Picker Wheelsnap-picker-wheel-15307Vertical picker wheel that snaps each value into a highlighted centre band with faded edges above and below.

Snap Timeline Railsnap-timeline-rail-15319Horizontally scrolling timeline with snap-aligned milestones on a shared line, dots lighting up on hover.

Snowfall Driftsnowfall-drift-15395Three parallax layers of white flakes falling at different speeds and sizes, the furthest layer blurred for depth.

Soft Emboss Buttonsoft-emboss-button-15361Neumorphic button moulded out of the surface by paired light and dark shadows, which invert so it presses inward when held.

Soft Ripple Buttonsoft-ripple-button-14963Material-style button where a soft ripple ring blooms from the center on press, CSS only.

Solid Blue MD Buttonsolid-blue-md-button-0040Solid blue button with a soft glow shadow and lift-on-hover.

Sort Header Caretsort-header-caret-15851Table header row where pointing at a column raises a half-lit caret to show it can be sorted, the live column keeping a solid caret and a blue underline, and pressing flips the caret end over end.

Sparkle Headingsparkle-heading-15387Warm heading with three clip-path stars that twinkle in and out around the words on staggered delays.

Speaking Avatarspeaking-avatar-15159Voice-call avatar with rings that ripple outward from the disc to show the person is currently speaking.

Spectrum Hue Sliderspectrum-hue-slider-15309Range input whose track is a full colour spectrum, with a transparent ring thumb that shows the hue underneath.

Spinning Coinspinning-coin-15205A lime coin with a visible rim built from stacked discs spins on its vertical axis and speeds up on hover.

Split Auth Modalsplit-auth-modal-15173A two-pane sign-in dialog with a violet artwork panel beside a compact form that lifts and tints its fields on hover.

Split Heading Entrancesplit-heading-entrance-15123Two words slide in from opposite edges and lock together into a single headline.

Split Pane Gripsplit-pane-grip-15863The separator holding an editor and its preview apart is a working splitter: reaching for the nine-pixel channel lights it blue, stretches its three grip dots and pushes a pair of arrowheads out into each pane to say which way it drags.

Split Slide Textsplit-slide-text-15013Heading cut horizontally through the middle whose upper and lower halves shear apart on hover.

Split-Tone Bordersplit-tone-border-15133Thick rounded border coloured magenta on the top-right and cyan on the bottom-left, swapping halves on hover.

Spreadsheet Range Gridspreadsheet-range-grid-15817Worksheet with a name box and formula bar over lettered columns and numbered rows, one column selected as a single outlined range complete with a fill handle at its corner.

Spring Squish Buttonspring-squish-button-14959Springy button that overshoots as it grows on hover and squashes like jelly on press.

Springy Tooltip Popspringy-tooltip-pop-15335Hovering the trigger pops a sky-blue tooltip with an arrow up above it using an overshooting spring easing.

Squircle Morph Togglesquircle-morph-toggle-15083A square thumb in a square track that slides across, spins and morphs into a circle inside a fuchsia pill when checked.

Stacked Toast Overlaystacked-toast-overlay-15723Three notifications piled in the corner of a page with only their top edges showing, springing apart into a readable column while the pointer is over the page.

Stacking Blocks Loaderstacking-blocks-loader-15371Amber blocks fall one by one and squash on landing to build a small tower, which holds a beat and then clears to start again.

Stamp Perforation Maskstamp-perforation-mask-15769A postage stamp whose perforated border is punched by uniting a repeating grid of circular holes with a solid inner rectangle, so the bites land only on the four edges; it tilts and glows when picked up.

Stamp Slam Entrancestamp-slam-entrance-15127A rubber-stamp label drops from oversized and slams onto the surface with a tilted, inked landing.

Star Burst Togglestar-burst-toggle-15085Favorite toggle whose star fills amber, spins into place and fires an expanding ring when checked.

Star Rating Fieldstar-rating-field-15829Five-star input showing a saved rating of four, where sweeping across it clears the stored fill and repaints the row up to whichever star sits under the pointer.

Stat Tiles Skeletonstat-tiles-skeleton-15109Three KPI tile placeholders, each with a label bar, emerald-tinted number bar and a tiny sparkline.

Stencil Plate Textstencil-plate-text-15657A riveted metal stencil with the word cut out of it lies over the page, then lifts away on hover to reveal the grainy sprayed paint that went through the openings.

Step Area Chartstep-area-chart-15249A staircase step chart drawn as a clip-path polygon over a gridded plot area, with a sky-blue area fill and day labels.

Sticky Asidesticky-aside-15627Order summary pinned to the top of its column while the list beside it scrolls past, staying in reach the whole way down.

Sticky Card Pilesticky-card-pile-15903Steps that clamp to four staggered bottom offsets, so at rest they sit piled at the foot of the scroller with twenty pixels of each showing and peel away one by one as the list scrolls past them.

Sticky Day Pills Threadsticky-day-pills-thread-15305Chat thread scroller where each day divider pill sticks to the top until the next day pushes it away.

Sticky Media Panelsticky-media-panel-15631Article layout where the image sticks to the top of the viewport while the copy alongside it keeps scrolling.

Sticky New Dividersticky-new-divider-15629Unread-messages rule in a chat log that pins to the top of the scroller so the boundary stays visible while you read past it.

Sticky Total Footersticky-total-footer-15297Scrollable line-item list whose total row stays pinned to the bottom edge while the items scroll beneath it.

Stitched Leather Borderstitched-leather-border-15137Solid dark rim with a pale dashed seam stitched just inside it, the seam pulling tighter to the edge on hover.

Stitched Patch Buttonstitched-patch-button-14957Fabric-patch button with a dashed stitch seam inside its edge that loosens on hover.

Story Progress Barsstory-progress-bars-15271Story-style segmented progress bars where the active segment fills on a loop and pauses on hover.

Story Progress Reelstory-progress-reel-15779A stories-style slide topped by five segment bars, two already spent and the third filling steadily across its track while the author strip and caption sit over the artwork.

Streak Flame Badgestreak-flame-badge-15599Day-streak pill carrying a two-layer flame whose outer and inner tongues flicker against each other out of phase.

Streak Week Meterstreak-week-meter-15623Seven day cells reading a week at a glance — filled for done, outlined red for missed, and a dashed pulse on the day still open.

Success Modalsuccess-modal-15449Confirmation dialog centred on a green tick disc that keeps sending a soft halo outward, with a single dismiss action.

Sunburst Rayssunburst-rays-15235Amber sunburst rays from a repeating conic gradient rotate slowly around a glowing centre disc.

Swing-In Cardswing-in-card-15121Card swings in around its top-left corner like a hinged sign, overshooting slightly before hanging level.

Swinging Badgeswinging-badge-15209A conference ID badge hanging from a rose lanyard sways side to side with a subtle Y-axis twist and swings faster on hover.

Synthwave Floor Tilesynthwave-floor-tile-15029Retro synthwave scene with a striped sun and a cyan perspective grid that rolls toward the viewer.

Table Of Contents Navtable-of-contents-nav-15045Docs-style on-this-page list where the indigo rail marker jumps to whichever heading is hovered.

Tag Chip Inputtag-chip-input-15295Text field that holds removable tag chips inline, with the chip close buttons and the field border reacting on hover and focus.

Folded Corner Tagtag-foldedAn amber price tag with a notched right edge using clip-path — perfect for discount or sale labels.

Tape Label Buttontape-label-button-15363Strip of masking tape stuck on askew, its ends torn into a ragged clip-path and its surface crossed by a woven sheen, springing straight when hovered.

Taped Corner Frametaped-corner-frame-15611Photographic print mounted by four translucent tape strips across its corners, the top pair peeling further out on hover.

Tartan Plaid Setttartan-plaid-sett-15761A woven tartan sett built from one asymmetric band group crossed over itself, so the navy blocks, pale checks and thin yellow over-check darken and brighten where they overlap.

Tartan Plaid Tiletartan-plaid-tile-15027Rose tartan built from crossing translucent stripes of three widths, layered into a woven plaid.

Temperature Slidertemperature-slider-15551Thermostat slider whose track runs cool to hot across its length, the thumb picking up a warm halo as it is grabbed.

Terminal Window Cardterminal-window-card-15003A mock terminal card with traffic-light dots and a prompt whose cursor starts blinking on hover.

3D Layered Texttext-3dBold white text built up from six magenta shadow layers, creating a chunky retro 3D extrusion that lifts on hover.

Gradient Drop-Shadow Texttext-clipBold text filled with an indigo-to-pink gradient, lifted off the page by a soft colored drop-shadow.

Glitch Texttext-glitchCyberpunk-style distorted text with two clip-pathed colored ghosts that shift independently.

Animated Gradient Texttext-gradientBold heading text filled with a flowing five-color gradient that scrolls continuously.

Neon Glow Texttext-neonWhite text surrounded by layered cyan shadows that flicker like an old neon sign.

Reveal Mask Texttext-revealText filled with a multi-color gradient that pans across the letters and pauses, then sweeps back to repeat.

Shimmer Texttext-shimmerSubtle slate text with a bright gold highlight band that sweeps across continuously.

Typewritertext-typewriterMono-spaced text that types itself out character by character with a blinking caret, then re-types.

Wave Bounce Texttext-waveEach letter bounces up and down with a staggered delay, producing a rolling wave across the word.

Tick Spinner Loadertick-spinner-loader-15369Twelve radial ticks around a circle, each fading out in turn so a bright head appears to sweep the dial.

Ticker Bannerticker-banner-15185An orange announcement bar with a LIVE tag and an edge-faded marquee message that scrolls continuously and pauses on hover.

Ticker Line Meterticker-line-meter-15149Dozens of hairline bars masked from a single gradient, the lit run brightening toward its end and growing on hover.

Ticket Stub Cardticket-stub-card-14999An event ticket with notched edges and a perforated line whose stub tears away slightly on hover.

Ticket Stub Tagticket-stub-tag-15071Amber admission-ticket tag with punched notches and a perforated stub that tilts on hover.

Ticking Clock Iconticking-clock-icon-15563Analogue clock face with hour ticks and three hands, the red second hand stepping round in sixty discrete jumps.

Time Picker Fieldtime-picker-field-15543Segmented time field with separate hour and minute boxes that tint on focus and an AM/PM switch pinned to the right.

Timeline Year Tabstimeline-year-tabs-15741Tab strip drawn as a dated axis, with year ticks along a rail and a glowing marker that slides between them while the milestone below swaps in from the side.

Timer Bordertimer-border-15613Outline that draws itself edge by edge around the panel on a four-second cycle, the way a countdown ring reads on a rectangle.

Tip Callouttip-callout-15457Quiet hint panel with a small bulb in the gutter that lights up warm amber when the callout is hovered.

Toast Stack Skeletontoast-stack-skeleton-15877Notification stack placeholder with two dimmed toasts peeking out behind the front card, whose icon, title and body bars carry the sweep; hovering fans the pile apart.

iOS Toggle Switchtoggle-iosA pure-CSS iOS-style toggle with a hidden checkbox, smooth slide, and accessible focus ring.

Tooltip on Hovertooltip-hoverA dark chip that reveals a small floating tooltip with an arrow above it on hover, using only pseudo-elements.

Torchlight Reveal Masktorchlight-reveal-mask-15771A word sunk almost invisibly into a dark panel, legible only inside a circular clip path that drifts back and forth across it like a torch beam.

Torn Paper Edgetorn-paper-edge-15239An amber receipt card whose bottom edge is clipped into a ragged torn-paper polygon that stretches on hover.

Tracking Bloom Buttontracking-bloom-button-14967Typographic button whose letters spread apart while a green glow blooms from inside.

Tree Tabletree-table-15527File-tree table with disclosure arrows and two levels of indentation, sizes right-aligned in tabular figures.

Triangle Mosaic Tiletriangle-mosaic-tile-15031Four-tone conic gradient tiles into a low-poly triangle mosaic in fuchsia and magenta.

Truchet Arc Mazetruchet-arc-maze-15667Quarter-circle arcs tiled in two alternating orientations so their ends meet across every cell edge, forming one continuous looping labyrinth that a wave of brightness travels through diagonally.

Tunnel Ringstunnel-rings-15475Cyan frames flying out of the distance toward the viewer on a loop, fading in far away and out as they pass the plane.

Turntable Deckturntable-deck-15747A record deck laid back into the picture plane, the platter raised above the plinth and turning under a tonearm that creeps slowly inward across the grooves.

Turntable Ring Carouselturntable-ring-carousel-15317Six cards arranged on a 3D ring that turns continuously and pauses while hovered.

Twisting Ribbontwisting-ribbon-15473A row of gradient slats that each turn a half revolution on a delay, so a twist travels along the ribbon and back.

Type-to-Confirm Dialogtype-to-confirm-dialog-15445Destructive dialog whose delete button stays disabled and dull until the confirmation field is engaged, then turns live red.

Typewriter Entrancetypewriter-entrance-15117Monospace line types itself out character by character behind a caret that blinks a few times and settles.

Typewriter Fill Skeletontypewriter-fill-skeleton-15883Text placeholder that writes itself in rather than shimmering — each bar grows from zero width behind a blue caret that hands off to the line below, so the card fills top to bottom like typed copy.

Unblur Revealunblur-reveal-15581Card holding blurred private figures that sharpen into focus on hover as the prompt underneath fades away.

Underline Box Buttonunderline-box-button-14955A minimal text button whose underline grows upward into a soft tinted box on hover.

Underline Grow Fieldunderline-grow-field-15291Borderless field with a thin bottom rule where an accent underline grows outward from the centre on focus.

Undo Toast Timerundo-toast-timer-15337Hover the row to see it swap for a dark toast offering Undo, with an amber timer bar draining beneath it.

Unfolding Boxunfolding-box-15471Four indigo flaps hinged to an isometric base that swing outward together to reveal the mark printed inside.

Update Ready Toastupdate-ready-toast-15181A sky-blue app-update toast with a pinging status dot and a restart button that brightens and swells on hover.

Upload Listupload-list-15545Drop target followed by one row per file, each carrying its own progress bar and a done, percentage or failure marker.

URL Prefix Fieldurl-prefix-field-15039Domain input with a fixed https:// addon that fills sky blue and pops a checkmark once the field is focused.

Usage Bar Tableusage-bar-table-15277Quota table with an inline progress bar per row that thickens and brightens when the row is hovered.

Variance Metervariance-meter-15899Signed deviation read from a centre zero rather than from the left edge — the amber fill runs right of the line for over-plan and a green one runs left for under, with a dashed target marker and a readout that swaps sign as the value crosses on hover.

Venetian Blind Slatsvenetian-blind-slats-15671Seven slats hinged on their own horizontal axes that tilt shut and swing open again one after another, letting a lit sky and its low sun show through the gaps as they turn.

Venn Exclusion Maskvenn-exclusion-mask-15773Two overlapping discs composited with mask exclusion so the lens where they meet is punched clean out, leaving a pair of gradient crescents that swing and repaint on hover.

Venn Overlap Chartvenn-overlap-chart-15803Three translucent discs blended together so every intersection lightens, with the audience count printed in each exclusive region and in the shared centre.

Verified Check Avatarverified-check-avatar-15155Ringed initials avatar with a verified check badge tucked into the corner that pops larger on hover.

Voxel Wavevoxel-wave-15749A three by three field of isometric cubes, each built from a lit top and four shaded walls, riding up and down on a diagonal wave that crosses the grid.

Waffle Grid Meterwaffle-grid-meter-15897Percentage drawn as a hundred-cell waffle, one square per point, sixty-eight of them lit in a blue-to-indigo run that stops part way through a row; hovering lights the next seven in a paler tint to preview the charge.

Waffle Pictogram Chartwaffle-pictogram-chart-15801Fifty squares in a ten-wide grid with thirty-four of them filled, so the proportion can be counted square by square instead of read off an axis.

Wallet Sleeve Cardwallet-sleeve-card-15649A payment card tucked into a pocket with a semicircular thumb notch cut out of its top edge, riding up out of the sleeve on hover to show the full number.

Wave Column Risewave-column-rise-15435Bar columns growing up from the baseline in a scattered order rather than left to right, so the group arrives as a wave.

Wave Letters Textwave-letters-text-15381Heading whose letters rise and fall on a delayed sine so a wave travels through the word, shifting hue at the crest.

Wax Seal Badgewax-seal-badge-15593Irregular blob of sealing wax with a highlight, an inner shadow and initials pressed into it, tilting when hovered.

Wheel Picker Reelwheel-picker-reel-15783A drum of month labels standing on a 3D cylinder, fading as they curve away from the lit selection band, and rolling on by one notch when hovered.

Wizard Dialogwizard-dialog-15175A pale multi-step onboarding dialog with a segmented progress bar that advances a step and nudges its continue button on hover.

Wizard Steps Accordionwizard-steps-accordion-15737Setup accordion whose sections are numbered nodes threaded on a vertical rail, finished steps collapsing to a green tick and a summary while the current step stays open.

Wood Grain Boardwood-grain-board-15763A sawn timber board whose grain is drawn from three horizontal line periods that never line up, with a ringed knot swirling near the right edge.

XP Level Barxp-level-bar-15151Game-style experience bar bracketed by current and next level badges, gaining a chunk of XP on hover.

Zigzag Chevron Patternzigzag-chevron-pattern-15225Teal zigzag chevron stripes built from four layered gradients that slide sideways on hover.

Zigzag Receipt Edgezigzag-receipt-edge-15135Receipt-style panel with a sawtooth torn bottom edge cut by clip-path and a coloured tape line on top.

Zone Scale Meterzone-scale-meter-15621Graduated pressure strip split into safe, warning and danger bands, with a pointer drifting across the reading.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information

Abacus Count Loaderabacus-count-loader-15643Framed abacus whose beads slide along three rails one at a time, queueing against the far post before the whole row runs back to be counted again.

Accordion Photo Stripaccordion-photo-strip-15715Five narrow photo slices where the hovered one expands to more than three times its share and lights up while the rest dim, its caption rising from the bottom edge.

Achievement Toastachievement-toast-15179A game-style unlock toast with a round trophy badge that wobbles and a shimmer that sweeps across on hover.

Activity Rings Chartactivity-rings-chart-15251Three nested progress rings built from conic gradients and radial masks, with a colour-keyed legend showing each percentage.

Address Autocompleteaddress-autocomplete-15537Address field with a suggestion list hanging below it, each row giving the street on one line and the locality on the next.

Ambient Glow Bleedambient-glow-bleed-15853Now-playing card that lights itself: a second copy of the artwork sits behind the first under a heavy blur and a saturation boost, so the sleeve bleeds its own colour onto the card, spreading further on hover.

Anchored Popoveranchored-popover-15165A white popover with a caret pinned beneath its trigger button that springs downward and gains an accent ring on hover.

App Grid Menuapp-grid-menu-15409Nine-dot launcher button that springs open a grid of coloured app tiles anchored to its top-left corner.

Approval Chainapproval-chain-15521Sign-off chain of avatars along a line that changes colour as it passes each approver, the pending one pulsing amber.

Approval Request Alertapproval-request-alert-15459Review request notice showing who asked and what changed, with paired approve and request-changes actions along the foot.

Arc Toss Entrancearc-toss-entrance-15709Card chip lobbed along a parabola — steady sideways travel crossed with a rise and fall — that drops into a dashed slot and lights its outline on landing.

Arrow Rule Dividerarrow-rule-divider-15057A directional divider that starts from a glowing sky dot and ends in a solid arrowhead.

ASCII Rainascii-rainA noise field resolved as monospace glyphs, ordered by ink coverage, with per-column drops falling through it. Canvas 2D, so the ramp is a string you can edit.

Aurora Curtain Bandsaurora-curtain-bands-15389Blurred vertical ribbons of green and violet light that stretch and settle out of phase, like an aurora curtain over a dark horizon.

Aurora Veilaurora-veilThree drifting curtains of light with the vertical striation a real aurora has — the one background a blurred CSS gradient can never be mistaken for.

Autoplay Feature Tabsautoplay-feature-tabs-15467Vertical feature rail where the active row carries a progress line that fills on a timer before handing over to the next.

Autosave Draft Fieldautosave-draft-field-15837Draft editor with a blinking caret and a green saved stamp in its header that swaps for a spinning saving indicator the moment the field is touched.

Avatar Marquee Rowavatar-marquee-row-15719Band of member avatars that scrolls endlessly behind a soft fade at each edge, freezing under the pointer while every face grows and takes a blue rim.

Avatar Name Chipavatar-name-chip-15161Compact avatar-and-name pill that stretches on hover to reveal the person’s team beside their name.

Avatar Stack Tagavatar-stack-tag-15075Sky-blue tag with three overlapping avatars and a +N counter that fan apart on hover.

Award Rosetteaward-rosette-15597Pleated prize rosette with two notched ribbon tails, the fluted disc turning slightly when the badge is hovered.

Notification Pulse Badgebadge-pulseA pink badge with a cyan corner dot that emits an expanding ring continuously, signaling a live notification.

Status Dot Indicatorbadge-status-dotA small green dot with an outward-pulsing ring paired with a status label — common in dashboards for 'online' state.

Barcode Dividerbarcode-divider-15587Section rule drawn as a barcode of four bar widths on incommensurate spacings, faded out at both ends by a mask.

Basket Weave Ribbonsbasket-weave-ribbons-15669Horizontal and vertical ribbons crossing in a real over-under basket weave, the vertical strand masked in a checkerboard so it dives beneath the horizontal one at every other junction while the whole cloth creeps diagonally.

Battery Charge Iconbattery-charge-icon-15323Battery outline with one cell lit that charges cell by cell on hover and turns its casing green.

Aurora Backgroundbg-auroraTwo large blurred radial blobs drift independently across a near-black canvas, evoking northern lights.

Spinning Conic Gradientbg-conicA saturated conic wheel of seven colors that rotates continuously — striking as a hero panel backdrop.

Animated Gradientbg-gradientA four-color gradient that slowly pans its position to create a continuously morphing backdrop.

Animated Gridbg-gridA retro-tech glowing grid that pans diagonally over a radial vignette — Tron meets synthwave.

Mesh Gradientbg-meshA multi-point radial gradient mesh that gently shifts position, producing a soft aurora of color.

Floating Orbsbg-orbsThree blurred colored orbs drifting on a dark surface — great for hero section backdrops.

Starfield Backgroundbg-starsA repeating pattern of multi-color stars on a deep navy gradient that gently twinkles in opacity.

Billing Period Tabsbilling-period-tabs-15461Monthly and yearly segmented tabs with a sliding pill and a discount flag, the headline price crossfading as the period changes.

Blend Mode Rowblend-mode-row-15583Four identical swatches showing the same two discs composited under screen, overlay, colour-dodge and exclusion.

Blind Slat Revealblind-slat-reveal-15245Dark slats clipped with inset() cover half of a cyan panel; on hover they thin away in sequence like opening blinds.

Blinds Fill Buttonblinds-fill-button-14973Outline button whose background fills in as five vertical window blinds that widen until they meet.

Blinking Eye Iconblinking-eye-icon-15329An almond-shaped eye with a cyan iris whose lid slides shut when hovered.

Block Segment Rangeblock-segment-range-15311Range input with a track drawn as discrete orange blocks and a tall square thumb that fills in on hover.

Blue 3D Push Button (MD)blue-3d-push-button-md-4149Blue button with a solid extruded edge that compresses all the way down when pressed.

Blue Accent Alertblue-accent-alert-3905Inline alert with a blue accent rail and a tinted background wash.

Blue Accent Row Tableblue-accent-row-table-6811Borderless list table where hovering a row lights a blue bar down its left edge.

Blue Announcement Bannerblue-announcement-banner-6361Site-wide banner with a blue light sweeping along its top edge — attention without a modal.

Blue Bar Chartblue-bar-chart-4731Six-column blue bar chart; heights come from a --h custom property and grow in sequence.

Blue Blur-In Headingblue-blur-in-heading-5351Blue headline that resolves out of a blur while its tracking tightens — the current default for hero copy.

Blue Blur Scale Entranceblue-blur-scale-entrance-6051Element that resolves out of a blur while settling into place — softer than a plain fade-up, and the current house style.

Blue Blurred Pill Navblue-blurred-pill-nav-5659Sticky-header pill navigation on a blurred translucent bar, with a blue active state.

Blue Bottom Sheetblue-bottom-sheet-3807Mobile-style bottom sheet with a grab handle and a blue accent, sliding up from the edge.

Blue Bottom Tooltip (MD)blue-bottom-tooltip-md-2703Tooltip that scales in below the trigger with a blue outline.

Blue Breadcrumb Trailblue-breadcrumb-trail-5693Docs breadcrumb with CSS-drawn chevrons and a blue current page.

Blue Card Skeletonblue-card-skeleton-5993Full card placeholder — avatar, heading and three text lines — sweeping blue in one shared animation.

Blue Chevron Buttonsblue-chevron-buttons-7459Four directional chevrons drawn from two borders, in blue, with a lift on hover.

Blue Confirm Dialogblue-confirm-dialog-6303Destructive-action confirm with a blue ring, warning glyph, and a ghost/solid button pair.

Blue Corner Bracket Borderblue-corner-bracket-border-3379Two blue corner brackets that grow into a full frame on hover.

Blue Dashed Dividerblue-dashed-divider-2063Full-width dashed blue divider with a labeled section break.

Blue Details Accordionblue-details-accordion-4103Accessible <details> accordion — no JavaScript — with a blue plus icon that rotates into a cross.

Blue Develop On Hoverblue-develop-on-hover-7807Desaturated blue tile that regains color and pushes in when hovered.

Blue Dot Gridblue-dot-grid-4477Evenly spaced blue dot grid that drifts diagonally — a calm canvas background.

Blue Dotted Dividerblue-dotted-divider-2065Full-width dotted blue divider with a labeled section break.

Blue Draw-In Checkboxblue-draw-in-checkbox-5901Real <input type="checkbox"> styled with a blue fill and a checkmark that springs in — keyboard focus included.

Blue Edge-Fade Marqueeblue-edge-fade-marquee-4657Scrolling blue ticker whose ends dissolve into the background using mask-image.

Blue Equalizer Loaderblue-equalizer-loader-5133Five blue bars pumping out of phase — the compact "still working" indicator for inline use.

Blue Fade-Up Entrance (MD)blue-fade-up-entrance-md-2965Blue card that fades in while sliding up 20px on mount.

Blue Fading Dot Fieldblue-fading-dot-field-6575Blue dot field dissolved at the edges by a radial mask — the section background that never competes with the text on it.

Blue Fading Gridblue-fading-grid-5453The hero grid pattern: a blue rule grid dissolved at the edges by a radial mask so it never fights the content.

Blue Fill Sweep Textblue-fill-sweep-text-5385Muted type that floods with blue left-to-right on hover, by animating background-size behind clipped text.

Blue Film Grain Panelblue-film-grain-panel-6541Blue surface under animated film grain — hides gradient banding and adds the analog texture flat color lacks.

Blue Floating Label (MD)blue-floating-label-md-1576Blue input whose label floats above on focus or when filled.

Blue Focus Ring Fieldblue-focus-ring-field-5543Text field with a 3px blue focus ring and a label that lights via :focus-within. Keeps a visible focus state instead of removing it.

Blue Glass Buttonblue-glass-button-5017Translucent button lit from above, picking up a blue edge and halo on hover.

Blue Glow Avatar (MD)blue-glow-avatar-md-3639Initials avatar with a soft blue halo that widens on hover.

Blue Glow Field (Slate)blue-glow-field-slate-1374Slate background with two soft blue radial glows in opposite corners.

Blue Glow Text (MD)blue-glow-text-md-1166Blue text with a layered glow halo.

Blue Graph Paperblue-graph-paper-4559Blueprint grid with blue minor and major rules — four gradients, no images.

Blue iOS Switch (MD)blue-ios-switch-md-2357iOS-style toggle that slides a knob and lights up blue when on. Shown in both ON and OFF states with labels.

Blue Keycap Badgeblue-keycap-badge-5843Physical-looking keyboard shortcut caps that depress on hover and read blue when active.

Blue Labelled Dividerblue-labelled-divider-5727The "or continue with" rule: blue lines fading out from a centered label.

Blue Layered Depth Textblue-layered-depth-text-4293Stacked text-shadow layers give the headline a solid blue extrusion that deepens on hover.

Blue Lift Card (Slate)blue-lift-card-slate-0824Slate surface card with a blue top accent bar; lifts with colored shadow on hover.

Blue Live Status Pillblue-live-status-pill-3987Status pill with a blue dot that emits an expanding ping ring.

Blue Loading Buttonblue-loading-button-5075The pending state a submit button needs: blue tint, inline spinner, progress cursor.

Blue Marching Ants Borderblue-marching-ants-border-3345Dashed blue outline whose dashes crawl around the box — the classic dropzone cue.

Blue Neon Text (MD)blue-neon-text-md-4339Headline lit like a blue neon tube, with a slow hum in the brightness.

Blue Neon Tube Boxblue-neon-tube-box-4395Sign-style box with a blue tube border glowing inside and out.

Blue Outline Badge (MD)blue-outline-badge-md-2255Translucent blue outline pill badge in three example labels.

Blue Pill Nav (Slate)blue-pill-nav-slate-1855Slate pill nav with the active item highlighted in blue.

Blue Presence Avatarblue-presence-avatar-6221Blue avatar with an online dot that emits a ring — the presence pattern every collaborative app ships.

Blue Press Rippleblue-press-ripple-7613Material-style ripple that blooms from the center of a blue button on :active.

Blue Pulse Heartbeat (Norm)blue-pulse-heartbeat-norm-0664A blue disc that pulses in size and emits an expanding ring.

Blue Pulse Skeleton (MD)blue-pulse-skeleton-md-2819Blue-tinted skeleton bars that pulse opacity in sequence.

Blue Pulse Toggle (MD)blue-pulse-toggle-md-2519Round toggle whose blue knob glows and emits a halo when on. Shown in both states with labels.

Blue Range Sliderblue-range-slider-7273Range input with a blue track fill and a thumb that swells on hover.

Blue Rich Hover Cardblue-rich-hover-card-5959Profile preview popover with avatar, bio and stat, easing open from its top-left corner in blue.

Blue Ring Progressblue-ring-progress-3553Circular blue progress ring built from a single conic-gradient, with the value in the middle.

Blue Ring Radio Groupblue-ring-radio-group-6967Radio group whose selected dot pops into a blue ring — no JavaScript, pure :checked.

Blue Ring Spinner (Norm)blue-ring-spinner-norm-0490Classic norm rotating ring spinner in blue.

Blue Slide-Left Entrance (MD)blue-slide-left-entrance-md-3081Blue card that slides in from the left with a colored left border.

Blue Solid Badge (MD)blue-solid-badge-md-2153Solid blue pill badge in three example labels.

Blue Stat Tileblue-stat-tile-4813KPI tile with label, value, and a blue delta chip that lifts on hover.

Blue Status Badgeblue-status-badge-5785Status pill tinted with color-mix() from one blue value — change the base color and the fill and border follow.

Blue Striped Progress (MD)blue-striped-progress-md-3475Blue progress bar with diagonal stripes scrolling to signal ongoing work.

Blue Tick Checkboxblue-tick-checkbox-6933Custom checkbox that springs a white tick into a blue box, with a real focus ring.

Blue Top Tooltip (MD)blue-top-tooltip-md-2587Tooltip that fades in above the trigger with a blue arrow.

Blue Trend Rowsblue-trend-rows-6689Top-pages analytics list where each row's blue bar is the value — the density every dashboard sidebar needs.

Blue Underline Draw Linkblue-underline-draw-link-5419Inline link whose blue rule draws in from the left. Responds to keyboard focus as well as hover.

Blue Underline Tabsblue-underline-tabs-4021Tab row where a blue underline scales out from the center of the active item.

Blue Upload Dropzoneblue-upload-dropzone-5601Dashed blue dropzone that tints and lifts on hover, with a CSS-drawn upload arrow.

Blue Vertical Tabsblue-vertical-tabs-6395Settings-page sidebar tabs where a glowing blue marker grows out of the rail beside the active item.

Blue Vertical Timelineblue-vertical-timeline-4863Activity timeline with blue nodes; entries stagger in and the current step pulses.

Blueprint Frameblueprint-frame-15131Technical-drawing frame on faint graph lines with centre tick marks on each edge and crosshair corners.

Blueprint Spec Cardblueprint-spec-card-15653Drafting sheet on gridded blueprint paper with a hatched part and a title block, whose width and height dimension lines extend from their witness ticks and print their measurements when hovered.

Bounce-In Badgebounce-in-badge-15119Pill badge pops in with a springy overshoot, dips smaller and settles at its natural size.

Box Plot Rowsbox-plot-rows-15503Horizontal box-and-whisker rows showing the interquartile box against its full range, one row per percentile band.

Bracket Tabsbracket-tabs-15197Monospace tabs where a pair of fuchsia square brackets snaps around the checked tab label.

Branch Merge Dividerbranch-merge-divider-15867Section separator drawn as a merge in a commit graph: two coloured branch lines drop from their labelled tips, curve inward through rounded elbows and join at a pulsing node before continuing as a single grey trunk below.

Breakdown Popoverbreakdown-popover-15427Dashed-underlined total that opens an itemised popover of line charges and tax, with the grand total repeated at the foot.

Browser Folder Tabsbrowser-folder-tabs-15189Trapezoid browser-style tabs where the checked radio tab merges seamlessly into the indigo content pane below.

Brutalist Shadow Buttonbrutalist-shadow-button-14941Neo-brutalist button with a hard offset shadow that lifts on hover and collapses flat on press.

3D Push Buttonbtn-3dA chunky button with a solid drop-shadow base that compresses when pressed for a satisfying tactile feel.

Border Beam Buttonbtn-beamA dark button surrounded by a rotating conic-gradient beam that traces its border like a comet.

Border Draw Buttonbtn-border-drawMinimal text button whose top and bottom borders sweep in from opposite directions on hover.

Glow Trail Buttonbtn-glow-trailA deep-indigo button that ignites layered indigo glows on hover for an electric, almost magnetic presence.

Gradient Shift Buttonbtn-gradientA button whose multi-color gradient slides across on hover, paired with a soft drop shadow that intensifies.

Icon Slide Buttonbtn-icon-slideA warm amber button whose trailing arrow nudges right on hover, suggesting forward motion.

Liquid Wave Buttonbtn-liquidA teal wave rises from the bottom and floods the button on hover, with the text color flipping to white.

Neon Glow Buttonbtn-neonA bordered button with a soft cyan halo that fully ignites into a glowing pill on hover.

Pulse Ring Buttonbtn-pulseA pill button with two concentric rings that continuously pulse outward, calling attention without motion noise.

Shine Sweep Buttonbtn-shineA dark button with a skewed highlight band that sweeps across its surface on hover, like light catching glass.

Slide Fill Buttonbtn-slideA ghost button that fills from left to right with a solid color on hover, with the text color flipping in sync.

Bubble Chartbubble-chart-15509Scatter of translucent bubbles sized by a third measure, screen-blended over a faint plot grid so overlaps read as brighter.

Buffer Barbuffer-bar-15619Media scrubber showing three states in one track — played, buffered ahead and not yet loaded — with a knob that swells on hover.

Calendar Grid Skeletoncalendar-grid-skeleton-15113Month-view placeholder with a header, amber weekday ticks, a 7-by-4 grid of day cells and a highlighted today dot.

Callout Tail Framecallout-tail-frame-15891Tooltip outline whose pointer is a rotated square carrying two of the four border sides, its fill blanking the panel stroke behind it so the hairline runs unbroken into the tail — which slides the length of the edge on hover.

Caption Slide Cardcaption-slide-card-15001A media card where only the title peeks up from the bottom until hover slides the full caption into view.

Carbon Fiber Weavecarbon-fiber-weave-15231Dark carbon-fiber weave texture from offset radial dots with a faint highlight, tagged with an emerald label.

Card Declined Alertcard-declined-alert-15735Payment failure notice built around a miniature credit card with a stripe, chip and rejection badge, the card flinching every few seconds as if the reader pushed it back.

Card Fan Carouselcard-fan-carousel-15777Five slides held like a hand of cards, pivoting about a point below the deck so they spread wide and brighten on hover while the middle card lifts clear.

3D Flip Cardcard-flipA card that rotates 180° on the Y axis when hovered, revealing a different face on the back.

Card Flip CVC Fieldcard-flip-cvc-field-15673A payment form whose card preview turns a half rotation onto its magnetic-stripe back the moment the security-code field is reached, so the number you are being asked for is the one facing you.

Glassmorphism Cardcard-glassA frosted glass card with backdrop blur sitting over a colorful gradient plate — the classic iOS-style material.

Glow Pulse Cardcard-glowAn indigo card that breathes — its outer glow softly expands and contracts on a steady loop, calling attention without motion noise.

Gradient Border Cardcard-grad-borderA dark card framed by an animated four-color gradient ring that continuously morphs via a mask trick.

Hover Lift Cardcard-liftA gradient card that rises on hover with an intensifying colored shadow for a tactile floating effect.

Neumorphism Cardcard-neuA soft extruded card with dual light/dark shadows that invert into an inset on hover for a pressed feel.

Spotlight Cardcard-spotlightA dark card where a cyan spotlight follows the cursor, revealing the surface only where you point. (Move your mouse over it.)

3D Tilt Cardcard-tiltA violet gradient card that tilts in 3D space on hover, with title and subtitle lifted at different depths.

Cascading Submenu Popovercascading-submenu-popover-15699Context menu laid over a page whose chevroned row unfolds a second panel sideways, the flyout sliding out from under its parent as the pointer arrives.

Cassette Tape Cardcassette-tape-card-15655Compact cassette with a written label and a window onto two spoked hubs that turn continuously while the wound tape thickens on one reel and thins on the other.

Chamfered Corner Borderchamfered-corner-border-15139Octagonal panel whose bevelled corners keep a crisp gradient rim by nesting two matching clip-paths.

Chat Bubbles Skeletonchat-bubbles-skeleton-15107Messaging placeholder with alternating grey and sky-tinted chat bubbles that shimmer in sequence.

Custom Checkboxcheck-customA native checkbox restyled with appearance:none — fills with indigo and draws an animated checkmark when checked.

Checkout Summary Skeletoncheckout-summary-skeleton-15601Order summary placeholder with three charge rows, a dashed rule, a heavier total line and a full-width action block.

Chevron Breadcrumb Stepschevron-breadcrumb-steps-15263Arrow-shaped step chips that nest into one another like a breadcrumb trail and highlight on hover.

Chevron Path Tagschevron-path-tags-15871Location tags cut with a chevron point on one end and a matching notch on the other so they interlock into a single path strip, and pointing at any segment lights it and every segment leading up to it in blue.

Chevron Track Meterchevron-track-meter-15143A row of arrow-shaped chevrons filled left to right, with two more lighting up on hover to preview the next step.

Chip Dismiss Previewchip-dismiss-preview-15343Hovering the remove button on a tag chip previews the deletion by striking the label, tinting it red and shrinking the chip.

Circled Textcircled-text-15015A word that gets a hand-drawn ellipse sketched around it in a single looping stroke on hover.

Circuit Trace Boardcircuit-trace-board-15665A printed-circuit field of right-angle copper traces, solder pads and a pinned chip, with bright current pulses that run each trace and stop on the pad at its end.

Circuit Trace Loadercircuit-trace-loader-15647A glowing packet runs the rectangular copper trace of a small board, turning each corner in sequence around the chip package sitting at the centre.

Clap Counter Bumpclap-counter-bump-15339A Medium-style clap button where the hands bounce and a lime +1 badge floats up on hover.

Code Block Skeletoncode-block-skeleton-15105Mini editor placeholder with indented shimmering token bars, keyword bars tinted indigo.

Code Snippet Tabscode-snippet-tabs-15463Package-manager tabs sitting on top of a terminal pane, the active tab merging into the code surface below it.

Coffee Steam Iconcoffee-steam-icon-15561Line-drawn mug of coffee with three wisps of steam rising and skewing away on staggered delays.

Cohort Gridcohort-grid-15511Retention cohort table where each signup month is a row and colour intensity falls off week by week across it.

Coin Flip Loadercoin-flip-loader-14991A gold coin with two different faces spins continuously around its vertical axis.

Color Dodge Foil Tiltcolor-dodge-foil-tilt-15855Collector card finished in holographic foil: blurred rainbow stripes composited in color-dodge over the dark stock with a hard-light sheen above them, both sliding the other way as the card is hovered so the foil appears to tilt.

Color Picker Popovercolor-picker-popover-15097A fuchsia swatch button with an attached picker popover showing a saturation area, hue rail and hex readout.

Colour Swatch Radioscolour-swatch-radios-15293Radio group of colour swatch dots where the checked swatch grows an offset ring and a tick.

Column Rule Dividercolumn-rule-divider-15865A separator that is not an element at all: text flowing through a two-column layout is split by its own column-rule down the gutter, pinned at the middle by a small diamond node that turns and lights up with the rule on hover.

Column Spotlight Gridcolumn-spotlight-grid-15281Pricing comparison grid that highlights an entire column, not just a row, when any cell in it is hovered.

Comet Tail Dividercomet-tail-divider-15063A rule that thickens and brightens toward a glowing amber head, like a comet streaking across the page.

Comic Bubble Tooltipcomic-bubble-tooltip-15093Comic-book speech bubble with a hard offset shadow floating over a chunky amber icon button.

Compare Split Imagecompare-split-image-15713Before-and-after frame split by a draggable-looking divider that travels right on hover, wiping the flat ungraded shot away to expose the colour-graded version underneath.

Compare Wipe Tilecompare-wipe-tile-15675Two versions of the same layout stacked in one frame with a draggable-looking divider between them, which sweeps to the left edge on hover and wipes the greyed-out before state off the finished design.

Composition Barcomposition-bar-15259A single stacked 100% bar split into indigo-tinted segments with a header total and a colour-keyed legend of percentages.

Concentric Squaresconcentric-squares-15487Op-art squares nesting outward in deepening violet, drawn entirely from spreading box shadows and turning as they breathe.

Conditional Fieldsetconditional-fieldset-15547Checkbox that unrolls a hidden group of fields beneath it, the extra inputs staying out of the layout until they are needed.

Confetti Sprinkleconfetti-sprinkle-15489Sixteen coloured paper flecks scattered at unrepeating angles across a dark ground, for a celebratory surface texture.

Cookie Consent Overlaycookie-consent-overlay-15721Dimmed page with a consent bar pinned across its foot that grows upward on hover to unfold three category switches above the accept action.

Copy Fieldcopy-field-15401Read-only key field with a trailing button whose label rolls up to a green confirmation while it is held.

Copy Hint Tooltipcopy-hint-tooltip-15421Command token whose tooltip reads "click to copy" on hover and swaps for a green confirmation while the press is held.

Corner Bracket Buttoncorner-bracket-button-14945Crosshair-style corner brackets that extend into a complete frame around the label on hover.

Corrugated Sheetcorrugated-sheet-15765A galvanised corrugated sheet where each ridge is shaded from trough to highlight and back, with a row of dark rivets pinned along the top and bottom edges.

Counter Carouselcounter-carousel-15555Slide panel headed by a large position counter, with a thin fill bar and paired arrows sharing the footer.

Counter Ring Fieldcounter-ring-field-15397Text field with a conic character-budget ring in the trailing slot, filling further as the field takes focus.

Cover Banner Avatarcover-banner-avatar-15443Profile header with a gradient cover that shifts on hover while the circular avatar straddling its edge lifts and grows.

Crop Frame Imagecrop-frame-image-15717Photo under a crop tool: corner handles and rule-of-thirds guides frame a square selection that stretches to a widescreen box on hover while the pixel readout swaps beneath it.

Cross Hatch Patterncross-hatch-pattern-15229Lime cross-hatched pen strokes at 45 degrees; the weave tightens as the tiles shrink on hover.

Cube Face Carouselcube-face-carousel-15315A 3D cube that rotates to show the face selected by the dot navigation, using radio inputs and no JavaScript.

Cube Face Navcube-face-nav-15683A menu printed on the four sides of a solid cube standing on a lit floor, which turns a full quarter on hover so the next section swings round to face you and the current one rotates away.

Cut Line Dividercut-line-divider-15589Dashed cut-here rule interrupted by a pair of scissors whose blades open a little wider when the divider is hovered.

Day Night Switchday-night-switch-15849Theme toggle where the amber sun travels across the track, cools to pale grey and has a bite taken out of it by an offset disc so it lands as a crescent moon over a sky that has meanwhile filled with stars.

Delete Bin Hoverdelete-bin-hover-15567List row whose bin icon tips its lid open and turns red as the row is hovered, the can squashing when pressed.

Deploy Pipeline Toastdeploy-pipeline-toast-15729Toast that carries a three-stage pipeline along its foot, the connecting rail filling from left to right and each stage node lighting cyan as the deploy reaches it.

Diagonal Scan Sweepdiagonal-scan-sweep-15393Hatched dark field crossed at an angle by a soft blue scanning bar that fades in at one edge and out at the other.

Diagonal Stripe Skeletondiagonal-stripe-skeleton-15115Card placeholder filled with slowly marching teal barber-pole stripes instead of a shimmer sweep.

Diamond Lattice Tilediamond-lattice-tile-15025Offset diagonal facets crossed by fine violet seams form a faceted diamond lattice.

Diamond Platediamond-plate-15491Brushed metal tread plate with raised diamond studs picked out by paired highlight and shadow gradients.

Diamond Reveal Griddiamond-reveal-grid-15237A grid of indigo tiles clipped to diamonds that expand into full squares on hover, revealing the whole surface.

Die-Cut Sticker Tagdie-cut-sticker-tag-15077Lime sticker with a white die-cut border, slapped on at an angle, that springs upright on hover.

Diff Tablediff-table-15529Change log rendered as a diff, added rows tinted green with a plus and removed rows struck through in red.

Difference Stripe Textdifference-stripe-text-15579Heading set in difference blend over a drifting stripe field, so each letter inverts whatever band it happens to cross.

Directory Avatar Tabledirectory-avatar-table-15825Member list whose first column packs an initials disc beside a name stacked over its email address, with the role carried as a pill on the right and the owner pill tinted.

Disclosure Tree Navdisclosure-tree-nav-15687A file tree with indent guide lines down each branch, where the collapsed folder turns its caret a quarter and rolls its children open along the guide while the tree grows to make room.

Dither Gradientdither-gradientA two-tone field resolved by an 8x8 Bayer matrix — the 1-bit look, with the dither grid pinned to layout pixels so it survives a retina screen.

Animated Marching Dashesdivider-dashesA green dashed line whose segments appear to march continuously to the right via background-position animation.

Gradient Dividerdivider-gradientA horizontal hairline that fades in from both ends with an indigo-to-pink gradient — elegant for section breaks.

Wavy Dotted Dividerdivider-waveA row of evenly-spaced amber dots forming a soft wavy line — playful and lightweight.

DNA Helixdna-helix-15745Stack of gradient rungs all turning about one vertical axis on a staggered offset, so the column reads as a double helix winding endlessly through the frame.

Dog-Ear Carddog-ear-card-15373Note card with its top-right corner turned down to a coloured underside, the fold growing larger as the card lifts on hover.

Dog-Eared Framedog-eared-frame-15887Outlined note whose bottom-right corner is folded back, the flap painting over the frame so the diagonal becomes the new hairline edge, and peeling further open on hover.

Domino Fall Loaderdomino-fall-loader-15365Row of upright bars that tip over one after another along a floor line, then stand back up to run again.

Dot Expand Buttondot-expand-button-14949A small recording dot inflates to flood the whole pill with color on hover.

Dot Matrix Textdot-matrix-text-15385Heading rendered as an amber LED dot screen, the dot grid drifting slowly downward inside the letterforms.

Double Frame Buttondouble-frame-button-14965Gallery-frame button with a second outline ring that pushes outward on hover and snaps in on press.

Download Tray Icondownload-tray-icon-15557Download glyph whose arrow drops into the tray on hover while the tray itself lights up to catch it.

Drawer Label Tooltipdrawer-label-tooltip-15103Round emerald plus button whose label slides out sideways from behind it like a drawer on hover.

Drawer Toggle Navdrawer-toggle-nav-15405Hamburger button that morphs into a close icon while sliding a navigation drawer in from the left, driven entirely by a checkbox.

Drop Shadow Star Cutoutdrop-shadow-star-cutout-15353A clip-path star whose shadow hugs its points thanks to the drop-shadow filter, lifting with a pink glow on hover.

Drop Zone Overlaydrop-zone-overlay-15725Attachment list that blurs behind a dashed upload veil when files are dragged over it, the veil scaling up around a bobbing arrow and its size limits.

Drum Wheel Picker Fielddrum-wheel-picker-field-15679A value picker whose options are pasted around a real cylinder in three dimensions, curving away above and below the selection band and rolling one notch to the next value on hover.

Dual Row Marqueedual-row-marquee-15553Two pill belts scrolling in opposite directions at different speeds, both faded out at the edges by a gradient mask.

Dumbbell Chartdumbbell-chart-15257Dumbbell range chart: each row joins a grey start dot to an emerald end dot with a gradient bar, showing year-over-year change.

Echo Ring Buttonecho-ring-button-14977Pill button that emits two outline echoes rippling outward and fading when hovered.

Edge Spill Paneledge-spill-panel-15481Dark panel with a blurred colour bar hidden behind its lower edge, spilling light out around it and breathing slowly.

Ellipsis Text Tooltipellipsis-text-tooltip-15099A truncated filename that reveals its full text in a teal tooltip when hovered.

Emoji Rating Facesemoji-rating-faces-15569Row of grey faces that regain colour and jump forward under the cursor, the chosen one keeping a tinted disc behind it.

Enamel Pin Badgeenamel-pin-badge-15595Hard enamel pill inside a raised gold rim, with a gloss highlight that travels across the face every few seconds.

Envelope Open Iconenvelope-open-icon-15321A CSS envelope whose flap folds back and a lined letter slides up out of it on hover.

Error Summary Alerterror-summary-alert-15455Validation roll-up counting the problems in a form and listing each one as a link back to the field that caused it.

Error Summary Panelerror-summary-panel-15835Red summary block counting the form errors above the fields themselves, where hovering one of the listed messages rings the field it belongs to and reddens its label.

Error Trace Alerterror-trace-alert-15183A rose error alert built on a details element that expands to reveal a compact stack trace when clicked.

Estimated Checklistestimated-checklist-15515Setup checklist where each step carries its own time estimate and the running step spins a partial ring instead of a tick.

Expanding Detail Cardexpanding-detail-card-15377Service card that keeps its action row rolled away until hover, when the footer unrolls to reveal three controls.

Expanding Icon Tabsexpanding-icon-tabs-15193A cyan pill tab bar of icons where the checked tab unrolls a text label beside its glyph while the others stay compact.

Expanding Panel Carouselexpanding-panel-carousel-15313Four vertical strips where the selected panel expands to reveal its caption, driven by hidden radios with no JavaScript.

Expanding Sidebar Railexpanding-sidebar-rail-15411Narrow icon rail that widens on hover to bring its labels in from the left, keeping the active row highlighted throughout.

Eye Visibility Toggleeye-visibility-toggle-15091Show/hide password toggle where a closed eyelid opens and an indigo pupil pops in when checked.

Fan Stack Buttonfan-stack-button-14983A button sitting on a stack of colored sheets that fan out behind it like a hand of cards on hover.

FerrofluidferrofluidA metaball field whose blobs grow spikes along the field lines, faded in toward the surface so the cores stay round. Almost entirely specular, like the real material.

Fibre Patch Panelfibre-patch-panel-15753Four dark fibre channels between lit ports, each carrying a bright packet of light from the source port to the far one, which flares white as the packet lands.

Film Grain Overlayfilm-grain-overlay-15349An SVG turbulence noise texture blended in overlay mode over an orange gradient, growing coarser on hover.

Film Strip Maskfilm-strip-mask-15497Frame strip with sprocket holes punched along both edges by a repeating radial mask, each frame brightening on hover.

Filter Chip Setfilter-chip-set-15873Set of chips that carry their own state: a checked chip flips to solid sky and slides a tick out from its left edge, and the moment any chip in the set is checked a Clear link widens into being at the end of the row.

Filter Toolbar Tablefilter-toolbar-table-15531Data grid topped by a filter bar where each active constraint sits as a removable chip beside the search box.

Firefly Fieldfirefly-field-15483Warm motes drifting over a dark clearing, each fading up and down on its own timing so the field never repeats.

Flight Itinerary Stepsflight-itinerary-steps-15805Departure and arrival airports at either end of a dashed route, with a plane marker that flies the length of the path on hover and the flight details ruled off underneath.

Flip Avatarflip-avatar-15157Circular avatar showing initials that flips over in 3D on hover to reveal the name and role on its back.

Flip Clockflip-clock-15469Split-flap digit cards whose top half hinges forward on its axis and falls out of sight, the way a station clock turns over.

Flip Reveal Cardflip-reveal-card-14997A card that rotates around its vertical axis on hover to show a solid-colored back face.

Floating Card Rowsfloating-card-rows-15275Invoice table whose rows are spaced apart as rounded cards that light their border and nudge on hover.

Floating Label Fieldfloating-label-field-15285Text field whose placeholder label shrinks and floats to the top edge on focus or when a value is entered.

Floating Mini Playerfloating-mini-player-15171A picture-in-picture video overlay docked in the corner of a page that swells toward the cursor and advances its progress bar on hover.

Flow Sankeyflow-sankey-15505Two source bands feeding three destinations through tapered gradient ribbons, the others dimming as one flow is hovered.

Flyout Submenuflyout-submenu-15407Menu row with a chevron that opens a second-level panel alongside it, sliding in from behind the parent on hover.

Focus Pull Blurfocus-pull-blur-15351A heavily blurred teal-to-violet blob and its label pull into sharp focus on hover like a lens rack.

Focus Scale Railfocus-scale-rail-15303Horizontal snap rail where each card scales up and brightens as it passes the centre, driven by a view timeline.

Focus Toolbar Textareafocus-toolbar-textarea-15399Comment box that keeps its formatting toolbar folded away until the textarea is focused, when the bar unrolls above it.

Fold Crease Dividerfold-crease-divider-15591Separator built as a crease in the surface, shadow gathering above the fold and a thin catch of light below it.

Folded Ribbon Textfolded-ribbon-text-15659The word is printed across a concertina strip, every letter on a facet pitched alternately away from and toward the reader, and the pleats open out flat one after another on hover.

Folder Tab Cardfolder-tab-card-15005A tabbed folder card that tips its front open on hover while the paper inside slides up out of it.

Folder Tab Stackfolder-tab-stack-15681Manila-folder tabs stacked at different depths where the selected one rises to the front and paints over the pane border so tab and panel read as a single sheet, while the others sit sunk behind until hovered.

Follow Toggle Pillfollow-toggle-pill-15333A Follow pill that fills in, grows a checkmark and relabels itself Following when clicked, using a hidden checkbox.

Form Completion Meterform-completion-meter-15833Profile checklist headed by a conic progress ring reading sixty percent, with the finished requirement ticked and greyed and each outstanding one offering an add button on hover.

Frozen Grid Cornerfrozen-grid-corner-15901Data grid frozen on both axes at once — the header row sticks to the top, the metric column sticks to the left, and the corner cell carries both offsets with a higher stacking order so it never slips under either.

Gallery Dim Spotlightgallery-dim-spotlight-15441Thumbnail grid where hovering anywhere greys the whole set, and the tile under the cursor keeps its colour and grows.

Gear Medallion Framegear-medallion-frame-15499Rainbow disc with a ring of radial teeth masked out of the layer behind it, the teeth turning slowly around a still face.

Gear Mesh Togglegear-mesh-toggle-15695Two toothed wheels sitting idle in grey until the switch engages, when they take on cyan and turn against each other, the smaller one running faster as their teeth interlock.

Gear Train Loadergear-train-loader-15641Two toothed wheels with hubs and bolt holes sit meshed at the rim and turn against each other, the smaller amber gear running faster in the opposite direction.

Glitch Textglitch-text-15009Bold heading that splits into cyan and red offset slices jittering like a broken signal on hover.

Glow Pulse Blue MD Buttonglow-pulse-blue-md-button-0316Blue button that emits a soft pulsing glow ring on an infinite loop.

Gooey Merge Blobsgooey-merge-blobs-15355Two lime blobs that stretch and fuse together as they meet on hover, using the classic blur-plus-contrast gooey filter.

Grade Scale Badgegrade-scale-badge-15875Rating badge that shows the whole A-to-E scale rather than a single letter: the four grades this item did not earn stay short and desaturated while the awarded grade grows tall, keeps its full colour and takes a marker above it.

Gradient Frame Maskgradient-frame-mask-15243A hollow teal gradient frame carved with mask-composite that thickens and slides its gradient on hover.

Gradient Rim Taggradient-rim-tag-15073Dark pill wrapped in a thin violet-to-amber gradient rim that sweeps and glows on hover.

Grid Distortiongrid-distortionA ruled grid where the space bends toward the pointer, not the lines. Two cells away the grid is exactly where it was.

Grid Pulse Fieldgrid-pulse-field-15391Indigo lattice with a soft radial pulse wandering behind it, lighting different cells of the grid as it passes.

Growing Textarea Fieldgrowing-textarea-field-15041Compact textarea that expands on focus while a teal character-count chip fades in at the corner.

Gyroscope Ringsgyroscope-rings-15751Three nested gimbal rings each turning about a different axis at its own speed around a bright core, so the assembly never repeats the same silhouette twice.

Halftone Fade Tilehalftone-fade-tile-15023A halftone dot screen that fades from bold dots to fine points across a deep sky gradient.

Halftone Wavehalftone-waveA dot screen set at the print angle, its dots sized by a travelling wave. At 0 degrees it reads as a table of dots; at 23 it reads as tone.

Handoff Swimlane Stepshandoff-swimlane-steps-15813Four steps dropped into two owner lanes, with diagonal connectors cutting between the lanes at every handoff so the work is seen changing hands twice.

Hazard Stripe Alerthazard-stripe-alert-15177A warning alert edged with diagonal hazard stripes that scroll and a caution icon that tilts on hover.

Hazard Stripe Buttonhazard-stripe-button-14975Amber warning button that reveals marching diagonal hazard stripes while hovered.

Hazard Tape Borderhazard-tape-border-15885Warning panel edged with a twelve-pixel band of diagonal caution stripes that crawl continuously around the box, the dark plate inset inside it carrying a faint amber keyline.

Heart Like Iconheart-like-icon-15785A heart built from a rotated square and two discs that gives a double beat every few seconds and throws out an expanding like-ring when hovered.

Heart Mask Tileheart-mask-tile-15241A rose gradient masked into a heart by an inline SVG path, popping larger with a springy hover.

Heatmap Cell Gridheatmap-cell-grid-15273Compact data grid whose cells are tinted by value like a heatmap, with each cell popping forward on hover.

Helix Strand Loaderhelix-strand-loader-14987Two rows of dots weave over and under each other in a sine wave like a rotating DNA helix.

Hexagon Avatarhexagon-avatar-15153Initials on a gradient hexagon with a teal rim, the tile rotating a notch on hover while the letters stay upright.

Hinged Doorhinged-door-15201A wooden door in a glowing amber frame that swings open on its left hinge in perspective to reveal the word inside on hover.

Histogram Binshistogram-bins-15253A violet histogram of nine bell-shaped bins over a baseline with a dashed mean marker and axis ticks.

History Scrub Stepshistory-scrub-steps-15815Version list running oldest to newest where pointing at an entry offers to restore it and strikes through every later edit, previewing exactly what rolling back would throw away.

Hold To Confirm Ringhold-to-confirm-ring-15845Destructive button guarded by a hold: the red conic ring around the bin sweeps from empty to full over the second and a half you keep the pointer down, and drains back if you let go early.

Holo Foil Cardholo-foil-card-15007A trading-card style tile whose iridescent foil sheen slides across and brightens when hovered.

Horizontal Flex Accordionhorizontal-flex-accordion-15191Three vertical teal panels where the hovered one grows to triple width and lights up while its siblings squeeze aside.

Houndstooth Weavehoundstooth-weave-15485Classic houndstooth check woven from four offset diagonal gradients, slate teeth on a bone-white ground.

Hourglass Timer Iconhourglass-timer-icon-15791A framed hourglass whose upper chamber empties through a thin stream into the heap below, and once the sand has run through the whole frame turns over to start again.

Hourglass Timer Meterhourglass-timer-meter-15893Remaining time read as sand rather than a bar — the level in the top cone drops while the heap in the bottom one builds, with a dashed grain stream falling through the waist and the whole glass turning over on hover.

Avatar Stackhover-avatar-stackFour overlapping circular avatars that fan out horizontally on hover, with each one rising to the top in turn.

Hover Dropdown Navhover-dropdown-nav-15049Horizontal nav where hovering the Products link drops a sky-outlined panel of sub-links into view.

Icon Bounce Hoverhover-iconA pill chip whose arrow shoots up and to the right on hover, while the surface fills with color.

Image Zoom Hoverhover-zoomA framed visual that smoothly zooms in on hover while the overlay text stays sharp — common in image galleries.

HyperspeedhyperspeedStreaks accelerating out of a vanishing point, each hottest at its head. Done in polar coordinates, so 180 of them cost exactly what one does.

Icon Expand Buttonicon-expand-button-14961A round plus button that unrolls into a labeled pill on hover while the icon twists.

Icon Flip Buttonicon-flip-button-14979Button whose icon tile flips over like a coin on hover to reveal a checkmark on its back face.

Icon Pill Stepsicon-pill-steps-15269Vertical onboarding steps rendered as icon pills on a dotted rail, each nudging sideways on hover.

Import Error Gridimport-error-grid-15827CSV import preview headed by a red count banner, the two offending cells tinted and underlined with a wavy rule that raises the reason for the rejection on hover.

Initials Avatarinitials-avatar-15437Squircle initial avatars in per-person gradients, each rounding to a full circle and lifting when hovered.

Inline Edit Fieldinline-edit-field-15035Text that reads as plain copy until hovered, when a pencil slides in and the field reveals itself.

Floating Label Inputinput-floatA label that starts centered and gracefully floats up to the corner when the field is focused or filled.

Underline Grow Inputinput-underlineMinimalist input whose bottom border grows in from the left on focus for an elegant material reveal.

Insert Gap Dividerinsert-gap-divider-15861The hairline sitting in the gap between two blocks turns into a working control when you reach for it: the rule goes blue and dashed, a plus button springs up at its left end and an Insert block label slides out from behind it.

Invert Filter Tileinvert-filter-tile-15347A dark tile with amber and indigo blobs that flips to a light negative on hover using the invert filter with hue-rotate to keep hues stable.

IridescenceiridescenceThin-film interference: one phase read by three cosines a third of a turn apart, so the hue sweeps the whole palette instead of crossfading between two ends of it.

Iris Open Entranceiris-open-entrance-15705Panel uncovered by a circular clip that widens from a point at its centre, a thin ring racing ahead of the opening before the heading and caption fade up inside.

Isometric Cubes Tileisometric-cubes-tile-15021Stacked isometric cubes built entirely from six tiled linear gradients in indigo tones.

Jigsaw Join Buttonjigsaw-join-button-15639Button split into two puzzle halves sitting apart in a dashed tray, one carrying a round tab and the other a masked notch, which slide together on hover until the tab seats and the word reads whole.

Journey Path Stepsjourney-path-steps-15523Four numbered stages threaded around a dashed S-shaped route, so the journey doubles back instead of running in a straight line.

Kebab Menu Popoverkebab-menu-popover-15101A ⋮ overflow button with its dropdown menu open, rows highlighting violet and a destructive item set apart.

Ken Burns Tileken-burns-tile-15439Image tile under a slow Ken Burns pan and zoom that reverses at each end, with a gradient caption pinned to the foot.

Keyhole Peep Maskkeyhole-peep-mask-15775A gradient scene cut to an old-fashioned keyhole by uniting a circular mask with a narrow conic wedge below it, and the view pans across as you lean in on hover.

Label Track Switchlabel-track-switch-15413Wide switch that carries the words ON and OFF inside its track, each sliding out of view as the knob takes its place.

Ledger Accordionledger-accordion-15199A numbered emerald accordion whose open row fills its number badge and turns the plus into a minus.

Letterpress Textletterpress-text-15019Text debossed into a violet plate with an edge highlight that lights up on hover.

Lifted Nav Tabslifted-nav-tabs-15739Bottom navigation bar where selecting a tab lifts its icon out of the bar on a springy curve into a glowing gradient disc and floats its label up underneath.

Lightbulb Switch Iconlightbulb-switch-icon-15331A dim CSS lightbulb that lights up amber with a soft glow halo on hover.

Lightning Arclightning-arcThree filaments on their own strike clocks, most cycles passing with nothing at all. A bolt that is always there is a squiggle; the waiting is the effect.

Underline Reveal Linklink-underlineA link whose underline wipes in from left to right on hover and wipes out the same way on leave.

Liquid Fill Checkboxliquid-fill-checkbox-15415Checkbox that floods with teal liquid rising on a curved surface, the tick springing in once the box is full.

Liquid Metalliquid-metalNoise sampled at a position that is itself noise, twice, then cut into contours so the folds read as a polished surface rather than as fog.

Liquid Rise Buttonliquid-rise-button-14943Outline button that floods from the bottom with a curved liquid crest on hover.

Liquid Tank Meterliquid-tank-meter-15141Circular vessel filled to sixty percent by a slowly rotating blob whose uneven rim reads as a lapping wave.

Live Pulse Badgelive-pulse-badge-15069On-air LIVE pill whose white dot throws two staggered expanding rings.

Indeterminate Barloader-barA slim pill track with a colored segment that slides endlessly from left to right — perfect for progress feedback.

Three Dots Bounceloader-dotsThree colored dots that bounce in a staggered rhythm, perfect for inline status indicators.

Hexagon Flip Loaderloader-hexA purple hexagon (via clip-path) that flips on its Y axis while bouncing — geometric and modern.

Orbit Loaderloader-orbitThree colored dots circle a central point at staggered phases, like electrons tracing an orbit.

Pulse Ring Loaderloader-pulse-ringTwo concentric rings expand and fade in alternation, creating a sonar-like pulse.

Gradient Ring Loaderloader-ring-gradA conic gradient masked into a thin ring that rotates — a more colorful alternative to the classic spinner.

Skeleton Shimmerloader-skeletonTwo stacked placeholder bars with a soft sweeping highlight that signals content is on its way.

Classic Spinnerloader-spinnerThe timeless rotating-border spinner, refined with a subtle base ring for depth.

Square Waveloader-squareA single square that rotates and morphs its border-radius in a hypnotic wave pattern.

Liquid Wave Loaderloader-waveTwo counter-rotating waves slosh inside a circular vessel, creating a hypnotic liquid-fill illusion.

Locked Course Stepslocked-course-steps-15807Lesson chain running from a struck-through completed step through the in-progress one with its own part-filled bar, down to a padlocked step that is still out of reach.

Lollipop Chartlollipop-chart-15255Ranked lollipop chart with orange stems ending in a dot marker, category labels on the left and values on the right.

Long Shadow Textlong-shadow-text-15011A heading with a stacked flat shadow that extrudes into a long 3D block as it lifts on hover.

Louver Blindslouver-blinds-15211A stack of violet window slats tilts open in staggered 3D rotation on hover to reveal the glowing scene behind.

Mail Client Skeletonmail-client-skeleton-15879Three-pane inbox placeholder — an icon rail, a message list with one row already marked as selected, and a reading pane with a sender block and ragged body lines — under one sweep across all three panes.

Marimekko Mosaic Chartmarimekko-mosaic-chart-15795Mosaic of stacked columns where each column is as wide as the share of the market it represents, so both the split inside a region and the size of the region read from one block.

Marker Bubble Progressmarker-bubble-progress-15147Slim progress track with a round thumb marker and a floating value bubble that ride the fill as it grows.

Marker Highlight Tabsmarker-highlight-tabs-15195Serif text tabs where the checked tab receives a hand-drawn pink highlighter stroke that sweeps in from the left.

Marquee Label Buttonmarquee-label-button-14981The static label lifts away on hover and a looping ticker of text scrolls across the button instead.

Medal Leaderboard Tablemedal-leaderboard-table-15279Ranking table with gold, silver and bronze rank tints, avatar chips and a warm row highlight on hover.

Media Timelinemedia-timeline-15517Milestone rail where every entry carries a thumbnail beside its label, the image tilting and lifting as the row is hovered.

Menu Bars Morphmenu-bars-morph-15847Menu button whose three stacked bars converge and rotate into a cross as the middle bar squeezes out of existence, the caption swapping from Menu to Close on the same beat.

Merge Conflict Alertmerge-conflict-alert-15731Version-control notice whose body is a two-line diff, the incoming and outgoing versions stacked in red and green and each side lighting up as you point at it.

Mesh Header Cardmesh-header-card-15379Content card topped by a four-point mesh gradient whose colour blobs drift slowly against each other behind a pill label.

Metaball Lavametaball-lavaSix inverse-square fields thresholded into one body, so blobs grow a neck as they merge. No amount of border-radius produces a neck.

Metro Line Stepsmetro-line-steps-15513Transit-map progress line where stops are ring stations, interchanges are drawn larger and the live stop carries a halo.

Milestone Flag Barmilestone-flag-bar-15617Progress track with pennant flags planted at each reward point, the ones already passed lit in the same colour as the fill.

Milestone Thermometermilestone-thermometer-15811Fundraising tube filled from the bottom with milestone ticks scored across it and money labels beside each one, the reached amounts warmed and the level climbing toward the next milestone on hover.

Mirror Reflection Textmirror-reflection-text-15017A word with a fading upside-down reflection below it, both drifting apart when hovered.

Mixer Fader Bankmixer-fader-bank-15781Five channel faders in a console strip, each cap riding a lit groove against a tick scale, and the whole mix re-levels itself to a new set of positions on hover.

Moire Interferencemoire-interference-15233Two fine violet line screens overlap at a slight angle to form moire waves that shift as they twist on hover.

Monospace Ledger Tablemonospace-ledger-table-15283Accounting ledger with tabular monospace credit and debit columns and a double-ruled balance row.

Morphing Blob Shapemorphing-blob-shape-15327An organic gradient blob whose border-radius keeps morphing between shapes, brightening on hover.

Multi-Select Chipsmulti-select-chips-15417Row of filter chips that flip to a solid green pill and grow a tick from nothing as each one is selected.

Multi-Step Formmulti-step-form-15539Checkout step with a three-segment progress head, a paired expiry and CVC row, and back and continue actions.

Multiply Wash Tilemultiply-wash-tile-15577Light photo tile that takes a two-colour gradient wash multiplied over it on hover, deepening every tone at once.

Music Player Skeletonmusic-player-skeleton-15111Now-playing card placeholder with pink-tinted album art, title bars, a seek bar and shimmering control dots.

Mute Togglemute-toggle-15419Speaker control whose equaliser bars bounce while sound is on, then flatten as a red slash strikes across on mute.

Breadcrumb Trailnav-breadcrumbA breadcrumb trail with chevron separators that nudge forward on hover, and a bolded current page.

Hover Dropdown Menunav-dropdownA native <details>-based dropdown that animates open, with arrow rotation and hover-highlighted menu items.

Animated Hamburgernav-hamburgerPure-CSS hamburger menu using the checkbox hack — three lines morph into an X with no JavaScript.

Pill Tab Switchernav-pill-tabsA segmented pill tab control with a floating indigo indicator that snaps to the selected option via :has().

Neon Constellationneon-constellation-15759Four nodes wired together by faint edges, with a bright signal running down each link in turn and every node flaring as the pulse arrives at it.

Neon Dial Gaugeneon-dial-gauge-15755Round instrument face where the glow is a measurement: ticks light cyan up to the current reading, the boundary tick breathes, and a bright needle drifts either side of it.

Neon Laser Scannerneon-laser-scanner-15219A glowing red laser line sweeps up and down across a barcode panel.

Neon Marker Highlightneon-marker-highlight-15223A thin amber neon underline swells into a full glowing highlighter stroke behind the phrase on hover.

Neon Reflection Signneon-reflection-sign-15757A steady pink sign standing on a wet floor line, its blurred mirror image below wavering and skewing as if the puddle underneath it never quite settles.

Neon Ripple Ringsneon-ripple-rings-15217Concentric cyan neon rings pulse outward from a glowing core like a sonar ping.

Neon Sweep Borderneon-sweep-border-15221A fuchsia comet tail orbits the border of a dark card, leaving a glowing trail as it goes.

Neon Tube Toggleneon-tube-toggle-15089Hollow outline switch that ignites like a cyan neon tube, with a glowing thumb, when checked.

Neon Underline Linkneon-underline-link-15215Text link whose short glowing violet underline sweeps to full width and brightens the label on hover.

Neon Wireframe Cubeneon-wireframe-cube-15213A slowly turning 3D cube drawn from six glowing indigo outline faces.

Notched Tech Buttonnotched-tech-button-14951HUD-style button with clip-path notched corners that brightens and spaces out its label on hover.

Notification Popovernotification-popover-15423Bell button with an unread count badge that opens a right-aligned panel of notifications, unread rows marked by a blue dot.

NPS Scalenps-scale-15541Eleven-point recommendation scale where detractor and promoter halves preview in different colours and the choice lifts out of the row.

Ocean Action Overlayocean-action-overlay-11703Media tile whose controls rise into a dimmed frame on a stagger, using `transition-delay` so the sequence costs no keyframes.

Ocean Activity Feedocean-activity-feed-10783Event stream with avatars punched out of a connecting spine, refs set in monospace so an identifier never reads as prose.

Ocean Activity Ringsocean-activity-rings-10411Three nested conic dials each masked to a band, so one element per metric shows three independent values without any overlap maths.

Ocean Add to Cart Flightocean-add-to-cart-flight-13143Ghost of the item arcing from the button to the basket and shrinking as it goes, the count bumping only once the flight lands so cause and effect stay in order.

Ocean Airy Metrics Tableocean-airy-metrics-table-6887Borderless metrics table in ocean that dims every row except the one under the cursor.

Ocean Alert Dialogocean-alert-dialog-10491Centred confirmation led by a ringed icon, with the dismissive action styled quieter than the one you actually want pressed.

Ocean Alternating Timelineocean-alternating-timeline-9503Entries flipping side to side across a centre spine, with each node punched out of the rail by a background-colored ring.

Ocean Ambient Glow Cardocean-ambient-glow-card-6483Card sitting above a blurred ocean duplicate of itself — soft ambient light instead of a hard neon outline.

Ocean Amount Fieldocean-amount-field-11303Currency input with a fixed symbol and a unit picker sharing the box, the figure in tabular numerals so the caret does not shift as digits change.

Ocean Animated Gradient Text (MD)ocean-animated-gradient-text-md-1100Text filled with an animated ocean gradient that flows horizontally.

Ocean App Barocean-app-bar-11343Compact product header carrying mark, search, links and account in one blurred row, the search flexing so the ends stay pinned at any width.

Ocean Arch Windowocean-arch-window-11983Rounded arch cut with asymmetric border-radius rather than a clip-path, so the inner keyline can follow the same curve at an inset.

Ocean Argyle Latticeocean-argyle-lattice-11943Offset diamond blocks crossed by two thin repeating diagonals, which is what separates argyle from a plain checkerboard on the bias.

Ocean Arrow Slide Buttonocean-arrow-slide-button-5041The standard product CTA: ocean fill, and the arrow eases forward on hover.

Ocean Article Skeletonocean-article-skeleton-9011Thumbnail, headline and three ragged text lines, sized to the article card it stands in for so nothing jumps when the content lands.

Ocean Aurora Bloom Cardocean-aurora-bloom-card-8423Blurred ocean gradient breathing behind a dark card — glow without a single box-shadow.

Ocean Aurora CTAocean-aurora-cta-6507Light button orbited by a blurred ocean conic aura — high contrast on the button, all the color around it.

Ocean Auto Testimonialsocean-auto-testimonials-12251Quotes cross-fading on a shared twelve-second cycle with progress bars filling in lockstep, so the indicator is the timer rather than a separate loop.

Ocean Avatar Groupocean-avatar-group-10451Overlapped stack with a counted overflow chip, each face lifting out of the pile on hover with a background-colored ring keeping the seams clean.

Ocean Avatar Skeleton (MD)ocean-avatar-skeleton-md-2923Loading avatar with a rotating ocean conic gradient + text lines.

Ocean Avatar Stackocean-avatar-stack-3749Overlapping avatar group in ocean that fans out on hover, with an overflow chip.

Ocean Back to Topocean-back-to-top-10903Floating return control pinned with `position: sticky` inside the scroller, so it needs no fixed positioning and no scroll listener.

Ocean Badged Dividerocean-badged-divider-11383Section rule broken by a ringed medallion, the inner diamond rotated so the ornament reads as deliberate rather than as a dot.

Ocean Battery Meterocean-battery-meter-10383Charge indicator with the terminal nub drawn as a pseudo-element, so the cell body stays a clean box for the fill to sit inside.

Ocean Beaded Frameocean-beaded-frame-10343Four repeating gradients as edges rather than a dashed border, which is the only way to animate the dashes travelling around the box.

Ocean Beam Borderocean-beam-border-6147An ocean light packet chasing the border. Uses @property so the conic angle is a real animatable value, not a transform hack.

Ocean Beam Dividerocean-beam-divider-5751Hairline rule with an ocean light packet running along it — a section break with a pulse.

Ocean Beam Spotlightocean-beam-spotlight-5493A wide ocean beam sweeping down from above the fold, softened with grain.

Ocean Before / After Compareocean-before-after-compare-7321Drag the corner to wipe between an ocean treatment and the grayscale original — CSS resize, no JS.

Ocean Bento Metric Tile (MD)ocean-bento-metric-tile-md-5183Dashboard tile with a hairline ring, a lit top edge and an ocean corner bloom — the bento-grid unit.

Ocean Blend Mode Headlineocean-blend-mode-headline-7855Type set in overlay blend over a grainy ocean field, flipping to difference on hover.

Ocean Blind Revealocean-blind-reveal-11611Six slats collapsing on a stagger from their top edge, so the surface behind is uncovered in bands rather than by a single wipe.

Ocean Blur Backdrop Dialogocean-blur-backdrop-dialog-3773Dialog over a frosted ocean backdrop; the scrim fades while the sheet lifts in.

Ocean Bokeh Fieldocean-bokeh-field-11263Out-of-focus orbs on one keyframe with negative delays, so the six start mid-cycle and the field is already in motion on first paint.

Ocean Book Coverocean-book-cover-13663Hardcover hinged at the spine rather than the page edge, so it swings past 90 degrees and lies back against itself the way a real cover does.

Ocean Border Draw-Inocean-border-draw-in-14131Four edges scaling in sequence from the corner the previous one finished at, so a single stroke appears to travel the perimeter before the label arrives.

Ocean Bottom Tab Barocean-bottom-tab-bar-8087Frosted mobile tab bar where the active item takes an ocean tint and lifts its icon.

Ocean Bouncing Dots (Norm)ocean-bouncing-dots-norm-0562Three bouncing dots in ocean colors with staggered timing.

Ocean Brick Bondocean-brick-bond-14543Running bond where the half-course offset comes from a second layer at double the cell size, so the staggered joints fall out of the geometry rather than being drawn.

Ocean Broken Imageocean-broken-image-13811The state every gallery eventually shows and few designs draw — a torn picture glyph over a hatched field, with the filename kept so the failure is diagnosable.

Ocean Build Logocean-build-log-11171Pipeline steps in monospace with completed ticks, one spinner on the running line, and pending steps dimmed rather than hidden.

Ocean Bulb Marqueeocean-bulb-marquee-12971Theatre sign whose bulbs are four repeat-axis radial gradients, stepped rather than eased so the chase clicks from lamp to lamp instead of sliding.

Ocean Bulk Action Barocean-bulk-action-bar-14771Action tray that rises over the table once rows are ticked, carrying the count and keeping the destructive option visually apart from the safe one.

Ocean Bullet Chartocean-bullet-chart-14023Stephen Few's replacement for the gauge — a measure bar over banded qualitative ranges with a target tick, carrying in one row what a dial needs a whole tile for.

Ocean Calendar Popoverocean-calendar-popover-13651Date field opening a month grid anchored beneath it, leading days from the previous month dimmed rather than blank so the week rows stay aligned to their columns.

Ocean Candlestick Chartocean-candlestick-chart-12023OHLC bars where each candle's wick and body come from custom properties on the element, so the data lives in the markup and the CSS stays one rule.

Ocean Caption Slideocean-caption-slide-9143Media tile whose caption bar slides up from below the frame on hover while the highlight drifts, marked up as a real figure and figcaption.

Ocean Card Deal-Inocean-card-deal-in-9051Three tiles hinged from their bottom edge and dealt in on a stagger, with the perspective on the parent so they share one vanishing point.

Ocean Card Deckocean-card-deck-7991Stacked ocean card that fans its two layers out from underneath when hovered.

Ocean Card Number Fieldocean-card-number-field-12903Payment entry as one joined control — number above, expiry and CVC sharing the row below — with the detected brand mark sitting inside the field it applies to.

Ocean Card Stackocean-card-stack-6443Stack of ocean cards that fans out on hover — depth from layering, not perspective, so it stays crisp.

Ocean Card Tabsocean-card-tabs-10571Radio-driven tabs whose panels are stacked in one grid cell, so the container height is the tallest panel and switching never jumps.

Ocean Carousel Ringocean-carousel-ring-10583Six panels pushed out along Z at sixty-degree intervals and turned as one group, which is the whole trick behind a 3D carousel.

Ocean Category Pillsocean-category-pills-11451Taxonomy links keyed by a colour dot rather than a filled background, so a row of them stays readable instead of turning into a paint chart.

Ocean Cellular Fieldocean-cellular-field-12543Six overlapping radial cells at fixed seed positions, each drifting on its own vector so the field reorganises without any single blob reading as the subject.

Ocean Centre Action Barocean-centre-action-bar-14531Mobile tab bar whose primary action sits raised in the middle, punched out of the bar by a ring shadow in the bar's own colour rather than by a real cut-out.

Ocean Changelog Accordionocean-changelog-accordion-13703Release entries folded by version, each summary carrying its own change-type tag and ship date so the history is readable without opening a single panel.

Ocean Character Staggerocean-character-stagger-10331Letters wrapped individually and released seventy milliseconds apart, each rotating slightly so the line assembles rather than sliding as a block.

Ocean Chart Skeletonocean-chart-skeleton-10263Placeholder shaped like the chart it stands in for — title, ragged bars and an axis — so the panel does not resize when real data arrives.

Ocean Checkbox Listocean-checkbox-list-11491Grouped options under a select-all whose indeterminate state is a bar rather than a tick, the one case a checkbox has three readings.

Ocean Checkerboardocean-checkerboard-4525Two-tone ocean checkerboard that shuffles half a tile back and forth.

Ocean Checkout Stepperocean-checkout-stepper-4887Three-stage horizontal stepper; completed stages fill with the ocean gradient and connect their rails.

Ocean Chevron Dividerocean-chevron-divider-8823A rule interrupted by a rotated chevron, punched out of the line with a solid box-shadow rather than a background swatch that has to match.

Ocean Chevron Flowocean-chevron-flow-9451Interlocking arrow segments cut with `clip-path`, the first and last squared off so the run reads as a pipeline with real ends.

Ocean Chevron Selectocean-chevron-select-6991Native select with the OS arrow stripped and an ocean chevron that nudges down on hover.

Ocean Chromatic Textocean-chromatic-text-11063Two coloured copies drifting apart in `screen` blend, so the fringes brighten where they overlap the way a real lens split does.

Ocean Circuit Tracesocean-circuit-traces-10691Orthogonal tracks with solder pads at the junctions, on two grid scales so the vias land between the crossings rather than on them.

Ocean Clip Wipe Reveal (MD)ocean-clip-wipe-reveal-md-4601An ocean panel wipes across via clip-path to swap the label on hover.

Ocean Coach Markocean-coach-mark-8971Product-tour callout anchored to a pinging hotspot, with step counter and advance button — the shape a first-run walkthrough actually needs.

Ocean Command Paletteocean-command-palette-6269⌘K palette on a blurred panel with an ocean selected row — the navigation surface every dev tool now ships.

Ocean Command Search Fieldocean-command-search-field-5567Search input with a CSS-drawn magnifier and a ⌘K keycap hint, lighting ocean on focus.

Ocean Commit Graphocean-commit-graph-13543Branch-and-merge history drawn with positioned gradient segments instead of SVG, so the fork stub, the parallel lane and the merge elbow are each one background layer.

Ocean Comparison Matrixocean-comparison-matrix-10851Plan matrix with the recommended column tinted top to bottom, and ticks and crosses drawn from borders rather than glyphs that vary by font.

Ocean Completion Checklistocean-completion-checklist-14611Onboarding meter that shows the remaining work as items rather than a percentage, the bar and the count agreeing so neither has to be trusted alone.

Ocean Condensing Headerocean-condensing-header-14623Masthead that gives back two thirds of its height as the page moves under it — logo, wordmark and nav each shedding at their own rate rather than scaling as a block.

Ocean Confetti Burstocean-confetti-burst-14451Six scraps thrown on individually authored arcs with mismatched durations and spins, because a burst where every piece shares a curve reads as a fan.

Ocean Confirm Dialogocean-confirm-dialog-8327Destructive confirmation over a blurred scrim, with an ocean primary action.

Ocean Confirm Popoverocean-confirm-popover-10251Inline confirmation with cancel and proceed, opening on focus as well as hover so a keyboard user can reach the buttons inside it.

Ocean Conic Border (MD)ocean-conic-border-md-3289An ocean light sweeps continuously around the border edge.

Ocean Conic Progress Ringocean-conic-progress-ring-8295Conic ocean ring with a punched-out center and a numeric readout.

Ocean Conic Ring Spinnerocean-conic-ring-spinner-5099Thin ocean arc spinner — one element, drawn by a conic gradient and cut to a ring with a radial mask.

Ocean Conic Sweep Maskocean-conic-sweep-mask-13131Radar-style wipe driven by an animated @property angle inside the mask itself, so the reveal follows a rotating wedge rather than a straight edge crossing the box.

Ocean Conic Swirlocean-conic-swirl-1516Rotating ocean conic gradient that swirls around the center.

Ocean Connection Barocean-connection-bar-11811Persistent network notice with a pinging indicator and a manual retry, sized as a bar rather than a toast because it does not auto-dismiss.

Ocean Consent Barocean-consent-bar-10531Cookie notice giving both choices equal size, since a decline styled as an afterthought is the pattern regulators actually object to.

Ocean Consent Panelocean-consent-panel-13771Per-category cookie controls rather than one accept button, with the essential row switched on and visibly locked so the choice that is not a choice reads as such.

Ocean Consent Rowocean-consent-row-9611Whole card is the label, so the entire row is a hit target, with the tick scaled from zero rather than toggled on `display`.

Ocean Constellation Netocean-constellation-net-13823Node field and its link mesh built as two gradient layers on matching cell sizes and moved together, so the dots stay on the lines without a single positioned element.

Ocean Context Menuocean-context-menu-10063Right-click menu with a rule between groups and each item's binding right-aligned, dimmed until the row is hovered so the shortcuts do not compete.

Ocean Contour Fieldocean-contour-field-8731Two repeating radial gradients offset into contour rings, drifting in opposite directions so the map reads as terrain rather than a texture.

Ocean Conversion Funnelocean-conversion-funnel-10771Stage bars narrowing by percentage width with the count inside each, so the drop-off is legible without reading a single number.

Ocean Copy Confirm Swapocean-copy-confirm-swap-7685Button whose label slides away to reveal an ocean "Copied" state underneath.

Ocean Corner Bracketsocean-corner-brackets-8255Two ocean corner brackets that grow into a complete frame when hovered.

Ocean Corner Keylineocean-corner-keyline-10371Two opposing corner brackets that grow to meet as a full frame on hover, so the border draws itself from both ends at once.

Ocean Corner Promoocean-corner-promo-11743Non-blocking announcement that slides up from the corner with its own dismiss, the pattern for news that does not deserve a modal.

Ocean Corner Ribbonocean-corner-ribbon-7531Card with a rotated ocean ribbon clipped to the top-right corner.

Ocean Count Badgeocean-count-badge-8863Unread counter pinned to the corner of a carrier tile, with a background-colored ring so it stays legible over whatever sits beneath it.

Ocean Countdown Ringocean-countdown-ring-13303Timer that empties rather than fills, the sweep animated through a registered angle property so the arc interpolates smoothly instead of snapping between conic stops.

Ocean Countdown Toastocean-countdown-toast-3953Frosted toast with an ocean bar draining along the bottom to show time until dismiss.

Ocean Counted Textareaocean-counted-textarea-10863Field and its meta bar joined into one control by removing the shared border, both taking the focus color so they light as a unit.

Ocean Counter Rollocean-counter-roll-12851Odometer entrance built from three digit columns behind fixed windows, each travelling a different distance and settling at a different moment so it lands like a mechanism.

Ocean Counter Tabsocean-counter-tabs-9291Tab strip carrying per-tab counts, with the underline scaled from zero and the badge recoloring only on the selected tab.

Ocean Coverflowocean-coverflow-9303Three panels turned toward a shared vanishing point, the flanking pair dimmed with `brightness` so depth reads without a fog layer.

Ocean Coverflow Railocean-coverflow-rail-7413Three ocean panels in perspective — the flanks straighten and brighten on hover.

Ocean Crossfade Slideshowocean-crossfade-slideshow-13423Slides stacked in place and dissolved between rather than translated, which keeps a full-bleed image from ever showing an edge, with the active dot stretching to a pill.

Ocean Crosshair Readoutocean-crosshair-readout-11503Chart hover state as one unit — dashed guide, marker dot and a value card pinned above the same x position, so the three never drift apart.

Ocean CRT Staticocean-crt-static-11291Phosphor tint under hard scanlines with a soft band rolling through, the three layers separate so each can be tuned without touching the others.

Ocean Curtain Revealocean-curtain-reveal-6099Ocean banner uncovered top-to-bottom by an animated clip-path inset — no wrapper element needed.

Ocean Custom Scrollbarocean-custom-scrollbar-7103Scrollable list with a slim ocean gradient thumb — styled for both WebKit and Firefox.

Ocean Date Mask Fieldocean-date-mask-field-14303Fixed day/month/year segments that take focus one at a time and auto-advance, so the separators are chrome the user never has to type.

Ocean Date Rangeocean-date-range-12171Two dates joined by an en-dash inside one focus ring, with quick presets underneath because most range picks are a common span, not an arbitrary one.

Ocean Day Agendaocean-day-agenda-13571Hour rail with events sitting in the slots they occupy and an empty hour left visibly empty, the current-time rule crossing the whole column with a dot on the gutter.

Ocean Delivery Trackerocean-delivery-tracker-14851Parcel progress with the vehicle riding the rail to the current node, both driven by the same easing so the marker and the fill arrive together.

Ocean Delta Chipocean-delta-chip-12583Percentage-change pill with a border-drawn caret, tabular figures so a column of them stays aligned, and a tinted fill derived from the same hue as the arrow.

Ocean Deploy Stepsocean-deploy-steps-4911Pipeline indicator: an ocean rail advances through stages while each label lights in turn.

Ocean Deploy Timelineocean-deploy-timeline-6713Build log timeline with ocean completed nodes, CSS-drawn checkmarks and a pulsing current step.

Ocean Desaturate Revealocean-desaturate-reveal-3737Media tile that sits in grayscale until hover, then restores full ocean color.

Ocean Detail Alertocean-detail-alert-12463Failure banner that keeps the stack trace folded behind a disclosure, so the summary stays one line and the detail is one click away rather than a separate screen.

Ocean Diagonal Splitocean-diagonal-split-12011Two panels cut on complementary diagonals with a deliberate gap between them, the labels nudged off-centre so neither straddles the seam.

Ocean Diagonal Stripesocean-diagonal-stripes-4501Barber-pole stripes in ocean sliding continuously across the surface.

Ocean Dial Sliderocean-dial-slider-14731Thermostat-style control where the handle is positioned by rotate-translate-counterrotate, so it rides the arc without the knob itself ever appearing to spin.

Ocean Directional Tooltipsocean-directional-tooltips-10223Top and bottom variants sharing one rule set, each arrow tinted to the gradient stop nearest it so the tail never mismatches the bubble.

Ocean Dismissible Bannerocean-dismissible-banner-8351Inline announcement with an ocean accent rail, info glyph and a rotating close button.

Ocean Divider (Med)ocean-divider-med-1975Fading ocean gradient divider line (med thickness), shown between two text blocks.

Ocean Divider (Thick)ocean-divider-thick-1977Fading ocean gradient divider line (thick thickness), shown between two text blocks.

Ocean Divider (Thin)ocean-divider-thin-1973Fading ocean gradient divider line (thin thickness), shown between two text blocks.

Ocean Donut Chartocean-donut-chart-4755Two-segment ocean donut drawn with one conic-gradient — no SVG, no chart library.

Ocean Donut Rowocean-donut-row-12051Three small multiples sharing one scale, so utilisation across resources is comparable at a glance rather than three separate readings.

Ocean Dot Carouselocean-dot-carousel-9691Slides translated as one strip with a pagination row whose active dot stretches into a pill rather than just changing color.

Ocean Double Frameocean-double-frame-9063Outer border with an inset rule that pulls further in on hover, so the frame breathes without the box itself resizing.

Ocean Double Rule Dividerocean-double-rule-divider-8851Two hairlines bracketing a glowing node, spaced far enough apart to read as a deliberate seam rather than a doubled border.

Ocean Download Progressocean-download-progress-12691One control carrying three states in sequence — label, determinate bar, then a checkmark — so the transfer never leaves the place the user clicked to start it.

Ocean Drag Handleocean-drag-handle-12303Sortable row whose dotted grip lights on hover and tilts fractionally while held, the cursor switching from grab to grabbing to confirm the state.

Ocean Drag Reorderocean-drag-reorder-14423Row lifting off the stack with a slight tilt while a dashed gap opens where it will land, so the drop target is shown rather than guessed at.

Ocean Dual Range Sliderocean-dual-range-slider-9663Two handles bounding a filled span, positioned as percentages so the same markup serves any min and max without recomputing pixels.

Ocean Dual-Ring Spinner (MD)ocean-dual-ring-spinner-md-3211Two concentric rings spinning in opposite directions in ocean colors.

Ocean Duotone Photoocean-duotone-photo-7773Grayscale base tinted ocean with mix-blend-mode: color — hover drops back to the original.

Ocean ECG Traceocean-ecg-trace-11903Heartbeat line cut from a clip-path polygon and scaled vertically, with a sweeping gain band passing over it like a monitor refresh.

Ocean Edge-Fade Chip Railocean-edge-fade-chip-rail-7227Overflowing chip row masked to fade at both edges so it reads as scrollable without a scrollbar.

Ocean Elastic Dropocean-elastic-drop-10303Squash-and-stretch entrance with a shadow that widens on impact, which is what sells the landing more than the bounce itself.

Ocean Emboss Reliefocean-emboss-relief-14143Letterforms pressed into the surface by one dark and one light offset shadow, the pair swapping sides on hover so the relief flips from debossed to raised.

Ocean Empty State Cardocean-empty-state-card-12731Placeholder panel with a dashed edge that reads as a slot waiting to be filled, the plus glyph tilting on hover so the whole card behaves like one target.

Ocean Empty Tableocean-empty-table-12131Zero-row state that keeps the header so the columns still teach what will appear, with one action rather than a bare "no data" line.

Ocean Equalizer Bars (Norm)ocean-equalizer-bars-norm-0748Five-bar audio equalizer in ocean colors with staggered heights.

Ocean Error Shake Fieldocean-error-shake-field-7709Field that shakes once on rejection, then focuses back to a calm ocean ring.

Ocean Event Cardocean-event-card-11183Listing led by a tear-off date block in a real `<time>`, so the day and month are one semantic unit rather than two decorated spans.

Ocean Expandable Tableocean-expandable-table-9543Detail row spanning the full width with `colspan`, keyed by an accent rule so the child reads as belonging to the row above it.

Ocean Expanding Outline (MD)ocean-expanding-outline-md-3405Outline pushes away from the button and blooms into an ocean glow on hover or keyboard focus.

Ocean Expanding Searchocean-expanding-search-8063Icon-only field that widens into a full ocean search box on hover or focus.

Ocean Exploded Stackocean-exploded-stack-8399Three ocean planes laid out isometrically that pull apart in Z on hover.

Ocean Facet Filtersocean-facet-filters-12423Stacked filter groups on native details elements, each summary carrying its active count and each row its result tally so the panel reads before it is opened.

Ocean Fade-Edge Listocean-fade-edge-list-6627Auto-scrolling list whose top and bottom dissolve into the page via mask-image — no hard cut, no wrapper gradients.

Ocean FAQ Accordionocean-faq-accordion-9263Native `<details>` rows whose plus collapses to a minus by rotating one bar — open state comes from the element, so it works without script.

Ocean Featured Pricing Cardocean-featured-pricing-card-5269The highlighted tier in a pricing table: ocean gradient ring, floating badge, CSS-drawn checkmarks.

Ocean Field Arrayocean-field-array-12931Repeatable row group where every entry carries its own remove control and the add affordance is dashed, marking it as the one row that is not yet data.

Ocean File Drop Zoneocean-file-drop-zone-7015Dashed upload target that tints ocean and spins its plus badge when you hover it.

Ocean Film Vignetteocean-film-vignette-11091Stacked grade, overlay grain and a radial vignette, the grain stepped in three frames so it stutters like emulsion rather than sliding.

Ocean Filmstripocean-filmstrip-10971Thumbnail row flanked by step controls, the active frame marked with an outline so selection costs no width and the strip never shifts.

Ocean Filter Popoverocean-filter-popover-14931Deferred-commit filter menu — selections stage inside the panel behind reset and apply, with the active count carried on the trigger so it survives closing.

Ocean Flickering Signocean-flickering-sign-4443Neon sign in ocean that stutters and cuts out like failing tube gas.

Ocean Flip Cardocean-flip-card-4243Card that flips 180° on hover to reveal its reverse ocean face.

Ocean Flip-In Entrance (MD)ocean-flip-in-entrance-md-3137Ocean card that flips in along the X axis with perspective.

Ocean Flip Switch (MD)ocean-flip-switch-md-2429Square-edged switch with an ocean gradient knob that slides horizontally. Shown in both states with labels.

Ocean Floating Dockocean-floating-dock-5625Frosted floating dock whose icons spring up and take on the ocean gradient under the pointer.

Ocean Floating Orbsocean-floating-orbs-5521Three heavily blurred ocean orbs drifting behind the content — a mesh gradient you can actually animate.

Ocean Flowing Gradient (Norm)ocean-flowing-gradient-norm-1298Full-bleed animated ocean gradient that flows diagonally on a loop.

Ocean Folder Iconocean-folder-icon-9703Folder drawn from one element and two pseudo-elements, the front flap hinged on its bottom edge so it opens in perspective on hover.

Ocean Folder Tabocean-folder-tab-13931Manila-folder outline where the tab's bottom stroke is painted out to join the panel, so the two shapes share one continuous border instead of stacking.

Ocean Folding Cubeocean-folding-cube-13091Four quadrants hinged at the shared centre corner, each folding in on X and out on Y a beat after the last so the square appears to turn itself inside out.

Ocean Folding Panelsocean-folding-panels-9331Four leaves hinged on their left edge and folded on a stagger, darkening as they turn away so the crease reads without a gradient overlay.

Ocean Footer Sitemapocean-footer-sitemap-13251Three-column link map under a gradient border-image rule, each link underlining from its leading edge so the columns stay quiet until something is pointed at.

Ocean Form Skeletonocean-form-skeleton-13383Placeholder shaped to the form it precedes — short label blocks over taller field blocks, a split row, and a submit bar carrying a warmer sweep than the fields above it.

Ocean Frosted Panelocean-frosted-panel-7879Glass panel over an ocean field — hovering pulls the blur back so the backdrop sharpens.

Ocean Fullscreen Takeoverocean-fullscreen-takeover-13183Dialog that grows from the footprint of the control that opened it to the whole viewport, its chrome fading in only after the box has finished travelling.

Ocean Gallery Skeletonocean-gallery-skeleton-11543Mixed-span grid placeholder, the wide cells breaking the rhythm so the loading state reads as a real masonry rather than a uniform block.

Ocean Gantt Barsocean-gantt-bars-10811Schedule rows offset by margin and sized by width, over a gridline background positioned to start where the track does.

Ocean Glass Card (MD)ocean-glass-card-md-3265Frosted glass card with an ocean radial glow behind the content.

Ocean Glass Tooltipocean-glass-tooltip-5925Frosted tooltip with an ocean hairline and a real arrow, driven by data-attr — appears on focus as well as hover.

Ocean Glitch Splitocean-glitch-split-7831Headline with ocean channel copies screened over it that jitter apart every few seconds.

Ocean Glossary Popoverocean-glossary-popover-13623Dotted term in running text that opens a definition card rather than a one-line tip, with the headword repeated and a category line so it reads as an entry, not a hint.

Ocean Glow Orbocean-glow-orb-4419Breathing ocean sphere with a specular highlight and a wide ambient bloom.

Ocean Glyph Switchocean-glyph-switch-11463Track carrying a tick and a cross drawn from borders, cross-faded so state is legible without relying on colour alone.

Ocean Gooey Buttonocean-gooey-button-13943Metaball effect from blur plus extreme contrast on a shared layer, so the two satellites stretch a liquid neck as they separate instead of simply moving apart.

Ocean Gradient Border Card (Slate)ocean-gradient-border-card-slate-0920Slate card with an animated ocean gradient border that shifts continuously.

Ocean Gradient MD Buttonocean-gradient-md-button-0112Diagonal ocean gradient that slides across on hover, with lift and shadow.

Ocean Gradient Ring Buttonocean-gradient-ring-button-4983Ghost button with a true 1px ocean gradient border — masked, so every corner radius stays clean.

Ocean Gradient Text (MD)ocean-gradient-text-md-1016Static ocean gradient text via background-clip.

Ocean Gradient Toastocean-gradient-toast-3929Solid ocean toast that drops in with a spring and keeps a blinking status dot.

Ocean Grain Cardocean-grain-card-5233Ocean gradient card with an inline SVG noise overlay — the fix for gradient banding on 8-bit displays.

Ocean Grainy Auroraocean-grainy-aurora-5481Slow-drifting ocean light pools under a grain layer — the current default for dark hero sections.

Ocean Grid Popocean-grid-pop-14103Tiles keyed off row plus column rather than index, so the entrance sweeps diagonally from the top-left corner instead of running along each row in turn.

Ocean Grouped Columnsocean-grouped-columns-6667Two-series comparison chart in ocean; bar heights are a --h custom property, so the markup carries the data.

Ocean Grouped Rowsocean-grouped-rows-13463Collapsible group headers carrying their own subtotal, tinted across the row so a header never gets mistaken for data, with children indented under a disclosure caret.

Ocean Hairline Gradient Ringocean-hairline-gradient-ring-6123The modern gradient border: painted on a pseudo-element and masked to a 1px ocean ring, so the radius stays true.

Ocean Half Gaugeocean-half-gauge-9131Semicircular dial built from one conic gradient masked by an inner arc, with the reading in tabular figures so it holds still as it changes.

Ocean Halftone Screenocean-halftone-screen-12343Repeating dot mask over a gradient, the cell size growing on hover so the screen coarsens the way a print separation would.

Ocean Halo Pillocean-halo-pill-11931Status chip sitting over a blurred copy of itself, the halo breathing on the same cycle as the dot so the two read as one pulse.

Ocean Hamburger Toggleocean-hamburger-toggle-7425Three ocean bars that fold into an X on click — one checkbox, no JavaScript.

Ocean Heart Likeocean-heart-like-7637Two rounded rectangles make the heart; checking it pops the shape and tints it ocean.

Ocean Heat Calendarocean-heat-calendar-9491Contribution grid filled column-first with `grid-auto-flow`, so weeks run down and the whole thing stays one flat list of cells.

Ocean Heat Gridocean-heat-grid-4841Contribution-graph style grid where ocean cells shimmer at different intensities.

Ocean Herringboneocean-herringbone-13291Two mirrored diagonal stripe fields butted at the centre line, which is the whole trick — herringbone is one hatch and its reflection sharing a seam.

Ocean Hexagon Tileocean-hexagon-tile-4681Six-sided ocean tile cut with clip-path that spins 30° on hover.

Ocean Histogram Rangeocean-histogram-range-13451Two-handle range sitting under a distribution of the values it filters, bars inside the selection lit and the rest left grey so the user can see where the results actually are.

Ocean Hold to Confirmocean-hold-to-confirm-9851Destructive action gated behind a press-and-hold fill driven by `:active`, so letting go before the sweep completes cancels it.

Ocean Honeycombocean-honeycomb-10663Hexagonal lattice from two offset radial gradients and a rule — a tiling CSS cannot draw directly, faked with half-cell offsets.

Ocean Hourglassocean-hourglass-14371Upper cone draining and lower cone filling on matched clip-path keyframes, the whole body turning over only once the sand has run through.

Ocean Hue Cycle Tileocean-hue-cycle-tile-7903Conic ocean tile walked through the full hue wheel by a single filter keyframe.

Ocean Icon Accordionocean-icon-accordion-11823Separated disclosure cards where the icon brightens and the chevron flips on open, both keyed off `[open]` rather than a toggled class.

Ocean Icon Pill (MD)ocean-icon-pill-md-3161Pill button with a pulsing dot indicator and ocean gradient body.

Ocean Icon Toolbarocean-icon-toolbar-11131Formatting cluster with a hairline separating groups, the alignment glyphs drawn from three background gradients rather than an icon font.

Ocean Icon View Tabsocean-icon-view-tabs-6419View-mode switcher with CSS-drawn icons and an ocean lit indicator on the selected mode.

Ocean Image Collageocean-image-collage-11731Asymmetric three-up where the hero spans both rows, each tile lifting independently so the grid never reflows on hover.

Ocean Indeterminate Barocean-indeterminate-bar-3519Loading bar with an unknown duration — an ocean segment sweeps across the track.

Ocean Indeterminate Parentocean-indeterminate-parent-13583Parent control in the mixed state its children actually put it in — the tick collapsed to a dash rather than swapped for a different glyph — with the tally spelled out beside it.

Ocean Infinity Loaderocean-infinity-loader-13063Single dot traced around a lemniscate in eight keyframe stations, crossing at the waist so the two lobes read as one continuous circuit rather than two orbits.

Ocean Inline Alertocean-inline-alert-9223Field-level message that says what is wrong and what to do about it, keyed by a thick left rule so it scans as attached to the input above.

Ocean Inline Edit Fieldocean-inline-edit-field-10891Value that reads as text until hovered, when a border and a pencil appear — the settings pattern that avoids a separate edit mode.

Ocean Inline Edit Gridocean-inline-edit-grid-13491Spreadsheet-style cells that outline under the pointer and drop into an editing state in place, so committing a value never costs a dialog or a round trip to a detail page.

Ocean Inset Glow Ringocean-inset-glow-ring-11651Selection state built entirely from stacked box-shadows — hairline, inner bloom and outer halo — so nothing about the element's size changes.

Ocean Iris Revealocean-iris-reveal-10731Cover layer collapsed to a zero-radius circle on hover, revealing the surface beneath from the centre out with no opacity crossfade.

Ocean Isometric Stackocean-isometric-stack-6471Three ocean plates floating in isometric projection, each drifting on its own offset.

Ocean Isometric Tilingocean-isometric-tiling-9383Four sheared gradients offset by half a tile into an interlocking cube lattice — one element, no SVG, and it tiles seamlessly at any size.

Ocean Kanban Skeletonocean-kanban-skeleton-13411Three-column board placeholder with uneven card heights and a per-column sweep delay, so the loading state carries the same ragged rhythm the real board will.

Ocean Keycap Buttonocean-keycap-button-13971Physical key with its travel in the shadow rather than the transform — the stem shortens as the cap descends, so the press bottoms out instead of sliding.

Ocean Kinetic Lettersocean-kinetic-letters-11223Characters riding one sine on a fixed phase offset, so the word ripples continuously instead of bouncing as a block.

Ocean Knockout Panelocean-knockout-panel-14383Solid panel multiplied over a moving field so white letterforms punch straight through to it — the type is a hole, not a fill, and the colour behind keeps drifting.

Ocean Labelled Dividerocean-labelled-divider-8111Flexbox "or" divider whose rules fade out from an ocean center — no fixed widths.

Ocean Labelled Meterocean-labelled-meter-3605Usage meter with a label row and an ocean tri-color fill that animates from zero.

Ocean Labelled Switchocean-labelled-switch-8903Track carrying its own ON and OFF words, cross-faded rather than translated, with a real checkbox behind it so it keeps focus and keyboard toggling.

Ocean Letter Cascadeocean-letter-cascade-8015Gradient-clipped headline whose letters drop in one at a time and lift individually on hover.

Ocean Level Badgeocean-level-badge-11423Rank chip whose ring is a conic gradient showing progress to the next tier, with the raw figures underneath in tabular numerals.

Ocean Light Coneocean-light-cone-14251Volumetric beam as a blurred trapezoid between an emitter and the ellipse it lands on, all three flickering together so the shaft and its pool stay tied.

Ocean Light Leakocean-light-leak-9783Blurred band swept across the frame in `color-dodge` with the label in `overlay`, so both react to what passes beneath them.

Ocean Lightboxocean-lightbox-9211Gallery overlay with prev/next controls and a thumbnail strip whose active frame is marked with an outline, so selection costs no layout.

Ocean Lightning Strikeocean-lightning-strike-14223Jagged bolt cut by clip-path and lit by stacked drop-shadows, driven on stepped keyframes so the discharge snaps between states the way a real strike does.

Ocean Line Riseocean-line-rise-12823Each line pushed up out of its own overflow-hidden track on a short stagger, which reads as type setting itself rather than as three blocks sliding in.

Ocean Liquid Loaderocean-liquid-loader-9891An oversized blob with a 42% radius spinning inside a circular clip, which turns a plain rotation into a rolling waterline.

Ocean List Row Skeletonocean-list-row-skeleton-8207Three placeholder rows — avatar, two text lines, trailing pill — sweeping ocean in sequence.

Ocean Loading Buttonocean-loading-button-7943Busy-state ocean button with an inline ring spinner and a breathing label.

Ocean Loading Veilocean-loading-veil-11771Blocking overlay scoped to one panel rather than the page, blurring the content behind so it is clearly still there but not interactive.

Ocean Locale Switcherocean-locale-switcher-13223Language menu listing each option in its own script rather than in the current one, with the ISO code trailing so the list stays scannable to someone who cannot read the endonym.

Ocean Location Pinocean-location-pin-9731Teardrop made from three rounded corners and one square one, floating over a shadow that shrinks as it rises so the lift reads as height.

Ocean Logo Marqueeocean-logo-marquee-7369Seamless logo ticker in ocean gradient type that pauses when you hover it.

Ocean Magnetic Link Chipocean-magnetic-link-chip-7733Pill link that lifts toward the cursor while its ocean arrow stretches forward.

Ocean Map Skeletonocean-map-skeleton-14663Loading state for a map view — tile grid, two roads at an angle and pulsing pin stubs — with the result card below carrying the usual sweep.

Ocean Marker Highlightocean-marker-highlight-9943Translucent bar swept behind a real `<mark>`, sitting slightly proud of the baseline so it reads as ink rather than a background box.

Ocean Masked Gradient Textocean-masked-gradient-text-9423Oversized gradient clipped to the glyphs and slid across them, with a white stop so a highlight travels through the letterforms.

Ocean Masked Ring Loaderocean-masked-ring-loader-7967Conic ocean sweep punched into a ring by a radial mask — one element, no border tricks.

Ocean Media Cardocean-media-card-6245Editorial thumbnail with a grain-textured ocean image, bottom scrim and eyebrow tag — swap the gradient for an <img>.

Ocean Mega Menuocean-mega-menu-8811Dropdown panel opening on hover and on `:focus-within`, so it is reachable by keyboard, with `visibility` transitioned so it is not tabbable while faded out.

Ocean Mention Autocompleteocean-mention-autocomplete-13023Composer that switches to name-matching the moment an at-sign is typed, the partial token tinted in place and the handle right-aligned so the list scans as one column.

Ocean Mention Toastocean-mention-toast-13743Social notification carrying who, what they said and two ways to respond, sized so the quoted line can wrap without pushing the actions off the card.

Ocean Menu Curtainocean-menu-curtain-10463Full-bleed navigation whose links rise on a stagger, with the siblings dimming on hover so the pointed-at item is the only bright one.

Ocean Mesh Gradientocean-mesh-gradient-8703Three heavily blurred blobs drifting on unequal periods, so the field never visibly loops back to where it started.

Ocean Milestone Trackocean-milestone-track-12063Roadmap where the current stage fills only half its connector, so "in progress" is visible on the rail rather than only in the node styling.

Ocean Morphing Blobocean-morphing-blob-4709Organic ocean blob that continuously reshapes itself through border-radius keyframes.

Ocean Morphing Dotsocean-morphing-dots-5157Three ocean dots swelling in sequence — the quietest loader that still reads as motion.

Ocean Multi Comboboxocean-multi-combobox-12143Chips, a typeahead and an option list in one control, the menu opening on `:focus-within` so it survives tabbing into the field.

Ocean Needle Dialocean-needle-dial-14583Analogue gauge whose needle overshoots its reading and settles back, the small correction being what separates an instrument from a bar drawn in a circle.

Ocean Neon Arrow Signocean-neon-arrow-sign-10623Three chevrons lighting in sequence beside a glowing label, the arrows drawn from two borders so each is a single element.

Ocean Neon Horizonocean-neon-horizon-10651Retro grid receding under a glowing sun, scrolled by exactly one cell so the loop is seamless and the lines appear to run forever.

Ocean Neon Level Meterocean-neon-level-meter-9371Six lit bars scaled from their base on a rolling delay, brightening at the bottom of the travel so the glow pumps with the motion.

Ocean Neon Outline Buttonocean-neon-outline-button-9343Hollow tube that floods on hover, with the fill cross-faded behind the text so the label never reflows as the state changes.

Ocean Nested Stepsocean-nested-steps-14823Two-level plan where sub-tasks hang off a rail indented under their parent, each connected by a stub, so progress inside a phase is visible without expanding it.

Ocean Newton's Cradleocean-newton-s-cradle-14343Five pendulums where only the end pair moves and the middle three stay dead still, which is the whole illusion — momentum appears to pass through them.

Ocean Notched Legendocean-notched-legend-12623Fieldset-style frame where the label sits in a gap punched through the stroke, the notch made by matching the label background to the surface rather than by clipping.

Ocean Notched Sliderocean-notched-slider-10943Discrete tier picker with the stops cut into the track by a repeating gradient, so the notches are part of the rail and cannot drift out of line.

Ocean Notification Bumpocean-notification-bump-7761Bell that swings on hover while its ocean count badge pops in over the corner.

Ocean Notification Cardocean-notification-card-11211Inbox rows where unread state is carried by a left rail, a faint tint and a dot at once, so it survives being skimmed at any zoom.

Ocean Now Playingocean-now-playing-14011Player row where the level meter runs on negative animation delays, so the twelve bars start mid-cycle and never line up into a visible wave.

Ocean Number Stepperocean-number-stepper-10023Quantity control with the field flanked by its own increment buttons, in tabular figures so the box does not resize between 9 and 10.

Ocean Numbered Stepperocean-numbered-stepper-9531Ordered list where the connector belongs to the step behind it, so a completed leg fills without any element spanning two items.

Ocean Offset Frameocean-offset-frame-9091A dashed box over a solid one offset behind it; on hover the two close the gap, so the whole thing reads as pressing down.

Ocean Option Tileocean-option-tile-10211Plan picker where the whole card is the label and the radio dot scales in on an overshoot, so the selection has weight without a layout change.

Ocean Orbit Loaderocean-orbit-loader-8611Three ocean satellites parked at 120-degree intervals and rotated as one group, so the ring keeps its spacing at any speed.

Ocean Ornament Dividerocean-ornament-divider-12811Three lozenges at the centre of a pair of rules that taper into the surface, the middle one turning half a revolution on hover while the flankers hold still.

Ocean OTP Code Inputocean-otp-code-input-7039Six-box verification code field with an ocean caret and a lift on the focused digit.

Ocean Outline Fill Textocean-outline-fill-text-9971Hollow display type with a filled copy in `::after` reading the same string from `data-text`, wiped in on hover so the two never disagree.

Ocean Page Turnocean-page-turn-11863Leaf hinged on the spine and swept through 180 degrees, darkening as it passes edge-on so the sheet reads as having two sides.

Ocean Paginationocean-pagination-10091Page links with an elided middle and tabular numerals, so widths stay even from page 2 to page 18 and the control never reflows.

Ocean Parallax Sceneocean-parallax-scene-10611Four layers shifted by different amounts on hover, blur increasing with distance so the depth cue is optical rather than just positional.

Ocean Password Revealocean-password-reveal-13051Masked field whose eye control drops its strike-through by scaling the bar to nothing from the centre, so the icon changes meaning without a second glyph swapping in.

Ocean Password Strengthocean-password-strength-7091Password field with a four-segment ocean strength meter that fills left to right.

Ocean Paywall Gateocean-paywall-gate-14463Content fading under a gradient rather than cut off at a hard line, so the reader can see there is more without being able to read it — the fade is the argument.

Ocean Pending Switchocean-pending-switch-10183Toggle whose knob carries a spinner once flipped, for settings that persist over the network and are not actually on until the server says so.

Ocean Percentage Ringocean-percentage-ring-8583Determinate conic ring with the value printed in the middle in tabular figures, so the number does not jitter as it counts.

Ocean Permission Promptocean-permission-prompt-12491Consent bar in the shape a browser uses for it — origin under the ask, block and allow weighted differently, the whole thing sized to sit under an address bar.

Ocean Perspective Floorocean-perspective-floor-12383Ground plane laid flat under an 78-degree rotateX so the grid converges on a horizon, with the background position scrolling one cell per cycle to read as forward travel.

Ocean Phone Fieldocean-phone-field-14183Dial code chosen inside the field it prefixes rather than in a separate control, with the valid state marked at the trailing edge where the eye finishes the line.

Ocean Photo Fanocean-photo-fan-13783Three prints squared up as one pile that spread from a shared bottom pivot, so the fan opens like a hand of cards rather than sliding apart in parallel.

Ocean Pill Tabsocean-pill-tabs-4045Compact pill tab group; the active tab carries the ocean gradient and a matching shadow.

Ocean Pin Code Fieldocean-pin-code-field-8743Six single-character boxes that mark themselves filled with `:not(:placeholder-shown)`, so state comes from the value rather than a class.

Ocean Pinned Column Tableocean-pinned-column-table-9571Row headers frozen with `position: sticky` while the measures scroll, using a box-shadow as the divider so the seam does not scroll away.

Ocean Plasma Globeocean-plasma-globe-12943Filaments pinned to a pulsing core and swept through short arcs on mismatched cycles, each skewed as it travels so the discharge never looks like a rotating spoke.

Ocean Plus Gridocean-plus-grid-8447Crossing ocean rules forming a plus lattice, masked to fade at the edges and slowly panning.

Ocean Plus To Closeocean-plus-to-close-7579Floating ocean action button whose plus rotates into a close cross.

Ocean Polaroid Frameocean-polaroid-frame-10423Instant-photo mount tilted off-axis that straightens and develops on hover, the caption in monospace on the wide bottom margin.

Ocean Posterize Bandsocean-posterize-bands-12863Continuous gradient quantized into three tone steps by a multiplying repeating-gradient, the banding backing off on hover to show what was thrown away.

Ocean Power Buttonocean-power-button-13611IEC power glyph as the control itself, the broken ring and its stem lighting together and the housing picking up an ambient glow so the off state is unmistakably dead.

Ocean Prefixed Fieldocean-prefixed-field-9583Immutable prefix and input sharing one bordered wrapper, so the focus ring surrounds the whole control instead of half of it.

Ocean Presence Avatarocean-presence-avatar-8303Initials avatar inside a rotating ocean conic ring, with a pinging online dot.

Ocean Price Tagocean-price-tag-13891Retail swing-ticket silhouette — pointed left end cut by clip-path with a punched eyelet — tilting on hover as though hanging from the hole.

Ocean Priority Pennantocean-priority-pennant-12611Swallow-tail flag cut from a single clip-path, the notch shallowing on hover so the tag squares off as it is picked out of a list.

Ocean Prism Drumocean-prism-drum-12411Four labelled faces mounted around a shared axis at a quarter turn each, the drum rotating one detent on hover so the next word rolls up into place.

Ocean Product Cardocean-product-card-9903Commerce tile with a corner flag, price and rating on one baseline, and a full-width action — the four things a grid card has to carry.

Ocean Profile Cardocean-profile-card-8651Cover banner with an avatar pulled up over the seam by a negative margin, so the ring sits half on the gradient and half on the body.

Ocean Profile Popoverocean-profile-popover-8183Mention chip that opens an ocean-edged profile card on hover or keyboard focus.

Ocean Profile Skeletonocean-profile-skeleton-10291Cover, overlapping avatar, name lines and a stat row, staggered top-down so the header reads as filling in rather than flashing at once.

Ocean Progress Cardocean-progress-card-12703Course-style tile that leads with how much is left rather than what it is, the meter animating to its real position once so a reduced-motion reader still sees 44 percent.

Ocean Progressive Loadocean-progressive-load-12503Blurred low-resolution stand-in sitting under the full image, the sharp layer fading over it and the status pill dropping out once there is nothing left to wait for.

Ocean Provider Buttonocean-provider-button-9823Full-width sign-in row with a square slot for the provider mark and a chevron that nudges on hover, sized so several stack without ragged edges.

Ocean Pull to Refreshocean-pull-to-refresh-13371Content sheet dragged down past its own top edge to expose a spinner parked behind it, the indicator scaling up from the gap rather than being pushed along by the sheet.

Ocean Quota Barocean-quota-bar-8283Multi-segment usage meter in ocean with a legend, each band growing in turn.

Ocean Quote Cardocean-quote-card-9931Testimonial with the opening mark hung outside the text block and clipped to a gradient, marked up as a real figure and blockquote.

Ocean Radar Chartocean-radar-chart-12743Six-axis spider plot where the web is one repeating-radial and one conic gradient, and the series is a single clip-path polygon that scales up from the centre as it plots.

Ocean Rain Cloudocean-rain-cloud-11011Cloud built from a pill and two circles inheriting its gradient, with three drops falling on a stagger so the rain never syncs into a row.

Ocean Rain Streaksocean-rain-streaks-12571Three repeating-gradient sheets falling at different rates and densities, the parallax between them doing the work that individual raindrop elements would otherwise cost.

Ocean Ranked Barsocean-ranked-bars-9463Three-column grid so labels, bars and values line up on their own axes, with widths as inline styles because the lengths are data.

Ocean Reaction Barocean-reaction-bar-11051Count chips that lift on hover with the one you have picked tinted and outlined, plus an add control drawn as two crossed bars.

Ocean Reaction Pickerocean-reaction-picker-11531Tray that floats above its trigger on hover or focus, each option popping on an overshoot so the row feels physical rather than a menu.

Ocean Reading Barocean-reading-bar-12211Progress rail stuck to the top of its own scroller, scaled rather than resized so the indicator animates without triggering layout.

Ocean Reading Progressocean-reading-progress-7151Sticky ocean progress bar driven by scroll-timeline — it tracks the scroll with no listener.

Ocean Redacted Textocean-redacted-text-11251Classified bars that wipe away from the right on hover, the words underneath present in the DOM the whole time so they stay selectable and searchable.

Ocean Release Listocean-release-list-12091Changelog entries with the version as a monospace tag, the latest highlighted so "what shipped most recently" is answerable without reading dates.

Ocean Removable Chipocean-removable-chip-5809Filter chip with a dismiss button that spins and fills ocean on hover.

Ocean Removable Tagsocean-removable-tags-8135Filter chips with a built-in × that spins on hover, filling ocean when the chip is active.

Ocean Resizable Columnsocean-resizable-columns-14743Grab handles straddling the header borders, each widening into a lit guide on hover — with fixed layout and ellipsis so a narrowed column truncates instead of reflowing.

Ocean Ribbon Badgeocean-ribbon-badge-8891Notched banner cut with `clip-path` and given a drop-shadow rather than a box-shadow, so the shade follows the arrow instead of boxing it.

Ocean Right Popover (MD)ocean-right-popover-md-2635Popover that slides in from the right with an ocean accent edge.

Ocean Ringing Bellocean-ringing-bell-12983Bell drawn from one rounded block plus a crown and a lip, pivoting at the mount while the clapper runs a second, later-peaking keyframe so the two do not move as one body.

Ocean Ripple Fieldocean-ripple-field-10011Four rings released a beat apart and eased out, so the pulse is continuous from four elements rather than a long single-ring loop.

Ocean Roadmap Milestonesocean-roadmap-milestones-6741Horizontal roadmap with an ocean rail and milestone nodes that pop in one after another.

Ocean Rotary Knobocean-rotary-knob-14863Hardware-style control turning through 240 degrees of its detent ring, the pointer riding the body so the value is read where the mark meets the ticks.

Ocean Rotating Cogocean-rotating-cog-14263Gear teeth as alternating conic stops with the disc centre masked away, the hub ring masked the opposite way — two elements, no path data, twelve teeth.

Ocean Rotating Cubeocean-rotating-cube-4271Six-faced cube in ocean colors, rotating continuously with real CSS 3D transforms.

Ocean Route Progress Barocean-route-progress-bar-6171The thin ocean bar that rides the top of the viewport during a route change — races ahead, then fades at 100%.

Ocean Sale Starburstocean-sale-starburst-10171Eight-point star made from two rounded squares at 45 degrees to each other — cheaper than a polygon and it keeps soft corners.

Ocean Saturation Splitocean-saturation-split-9811Two copies of one surface at different saturations, split by a clip-path handle that slides on hover — a before/after with no second asset.

Ocean Save Toggleocean-save-toggle-9743Bookmark flag drawn with a clip-path notch, springing up on an overshoot curve as the pill fills — one checkbox, no script.

Ocean Scale Fanocean-scale-fan-13263Interlocking arcs from two offset radial layers, the half-cell stagger doing the overlap that makes a scale pattern read as roofing rather than as rows of circles.

Ocean Scale-In Entrance (MD)ocean-scale-in-entrance-md-3013Ocean card that pops in from scale 0.6 → 1 with a spring easing.

Ocean Scoped Searchocean-scoped-search-11331Search bar with a leading scope menu and a trailing key hint, all three sharing one focus ring so the control reads as a single field.

Ocean Scramble Decodeocean-scramble-decode-13531Each slot holds a junk glyph and its real character stacked, swapping on a stepped keyframe left to right so the line resolves the way a cipher does rather than typing out.

Ocean Scroll Railocean-scroll-rail-9651Progress thumb riding a sticky rail beside scrolling copy, hiding the native scrollbar so the rail is the only indicator.

Ocean Scroll Reveal Stackocean-scroll-reveal-stack-7199Cards that fade and rise as they enter the scrollport, using view() — falls back to a plain fade-in.

Ocean Scroll Sentinelocean-scroll-sentinel-13343List whose last child is a loading marker rather than a button, positioned so it enters the viewport a little before the content runs out and the next page can be fetched.

Ocean Scroll Shadowsocean-scroll-shadows-14651Overflow cue as a tinted shadow at whichever edge still has content past it, which survives a patterned backdrop where a fade-to-transparent mask would not.

Ocean Scroll-Spy Dotsocean-scroll-spy-dots-7239Snap-scrolling pane beside an ocean dot rail that marks the section you're on.

Ocean Scrollable Tabsocean-scrollable-tabs-11851Overflowing tab strip with gradient masks at both ends, so a cut-off label reads as scrollable rather than as a rendering fault.

Ocean Search Morphocean-search-morph-10983Magnifier whose ring flattens into a bar and whose handle counter-rotates, turning the glass into a cross without swapping any element.

Ocean Security Shieldocean-security-shield-12291Shield outline made by clipping a filled shape and an inset dark copy to the same polygon, with a padlock drawn from two children.

Ocean Segmented Controlocean-segmented-control-8931Three exclusive options as real radios, so arrow keys move between segments — a row of buttons would need a Tab stop each.

Ocean Segmented Meterocean-segmented-meter-3577Five segments light up in sequence in ocean — good for multi-step or signal-strength meters.

Ocean Segmented Ringocean-segmented-ring-12651Dashed arc border built from a conic gradient rather than dash properties, masked to a hairline so the segments can carry three colours and still rotate as one piece.

Ocean Selectable Tableocean-selectable-table-10823Row selection with a bulk-action bar that replaces the header, and selected rows tinted so the count and the rows agree at a glance.

Ocean Semicircle Gaugeocean-semicircle-gauge-6639Half-dial score gauge in ocean, drawn from one conic gradient and cut to an arc with a radial mask.

Ocean Settings Switchesocean-settings-switches-14891Preference rows where the whole line is the target and the thumb stretches under the pointer before it travels, so the switch feels pressed rather than clicked.

Ocean Share Popoverocean-share-popover-14903Share sheet pairing a row of destination tiles with the raw link and its copy button, since the link is what most people were reaching for anyway.

Ocean Sheen Button (MD)ocean-sheen-button-md-4937Ocean CTA with a lit top edge and a highlight that sweeps across on a slow loop.

Ocean Sheet Stackocean-sheet-stack-13211Three bottom sheets pushed one behind the other, each narrower and dimmer than the one in front, so depth in the navigation stack is legible without a back label.

Ocean Shine Heading (MD)ocean-shine-heading-md-5295Hero headline with light travelling through the letters — background-clip: text over a moving ocean gradient.

Ocean Shortcut Tooltipocean-shortcut-tooltip-8943Hint showing its own key binding in real `<kbd>` elements, opening on hover and focus so the shortcut is discoverable from the keyboard too.

Ocean Side Drawerocean-side-drawer-9183Panel sliding in over a blurred scrim on a decelerating curve, so it settles rather than stopping dead at the edge.

Ocean Sidebar Groupsocean-sidebar-groups-14503Nav split by labelled section with the active row marked by a rail bleeding past the panel padding, so the indicator belongs to the sidebar rather than the item.

Ocean Sidebar Railocean-sidebar-rail-8783Vertical nav whose active marker grows from the centre out, so hover and selected read as the same gesture at two lengths.

Ocean Signal Barsocean-signal-bars-13331Five-step strength meter that lights bottom-up on a stagger and leaves the tallest bar dark, which is what four-of-five actually looks like on a device.

Ocean Signature Padocean-signature-pad-14211Signing surface with a dashed baseline and cross mark, the stroke revealed left to right by an animated inset clip so it draws rather than fades in.

Ocean Sketch Frameocean-sketch-frame-13903Wobbly ink frame from asymmetric elliptical border-radii doubled at an offset, the two strokes disagreeing just enough to read as drawn rather than computed.

Ocean Skill Barsocean-skill-bars-11691Labelled proficiency rows on a two-column grid so the name and the figure sit on one line with the track spanning both beneath.

Ocean Slant Transitionocean-slant-transition-11411Two bands with mirrored diagonal cuts meeting on one line, so the seam between sections is an angle rather than a horizontal rule.

Ocean Slide to Unlockocean-slide-to-unlock-12663Drag-track confirmation where the knob travels the full width and a tinted fill follows it, the prompt fading out once the gesture is past the point of being accidental.

Ocean Slider With Bubbleocean-slider-with-bubble-7297Gradient-filled range with an ocean value bubble and pointer sitting above the thumb.

Ocean Sliding Panelsocean-sliding-panels-13731Panels laid end to end on one track that translates by a third per tab, so switching moves horizontally instead of cross-fading in place.

Ocean Sliding Segmentsocean-sliding-segments-4069Segmented control with an ocean thumb that glides between the three options.

Ocean Slug Previewocean-slug-preview-14331Title field with the URL it will produce rendered underneath, domain greyed and slug highlighted, so the transformation is visible before anything is saved.

Ocean Snap Carouselocean-snap-carousel-7345Full-width ocean slide track with center snapping and a stretching active dot.

Ocean Snap Galleryocean-snap-gallery-10931Horizontal rail with `scroll-snap-align: center`, so tiles settle centred rather than flush left and the row never stops half-way.

Ocean Snap Railocean-snap-rail-7127Horizontal ocean card rail that snaps each tile to the left edge, scrollbar hidden.

Ocean Solarizeocean-solarize-14171Sabattier effect from an inverted copy composited with lighten, which flips only the tones the original leaves dark — the partial reversal a full invert cannot give.

Ocean Sortable Header Tableocean-sortable-header-table-6859Table headers that read as sortable — hover reveals the caret, the active column tints ocean.

Ocean Sparkline Areaocean-sparkline-area-4779Compact ocean area sparkline shaped entirely by a clip-path polygon.

Ocean Sparkline Cardocean-sparkline-card-8623Metric tile with a delta pill and an eight-bar sparkline drawn in CSS, so the trend needs no charting library and no SVG.

Ocean Sparkline KPIocean-sparkline-kpi-8495Metric tile with a clip-path area sparkline fading from ocean into the card.

Ocean Sparkline Tableocean-sparkline-table-12103Trend column drawn inline per row, so direction and current value sit on the same line instead of in a chart somewhere else on the page.

Ocean Speech Bubbleocean-speech-bubble-7507Chat bubble with a border-drawn tail on an ocean gradient fill.

Ocean Speed Dialocean-speed-dial-11103Floating action whose plus rotates into a cross while three satellites fan out along a quarter arc, each on its own translate.

Ocean Spinning Pyramidocean-spinning-pyramid-11891Four CSS triangles hinged at a shared base and splayed by quarter turns, tilted so the solid closes rather than reading as loose fins.

Ocean Spinning Ring Avatarocean-spinning-ring-avatar-3685Avatar wrapped in a rotating ocean conic ring — the "story" ring pattern, in pure CSS.

Ocean Split Badgeocean-split-badge-13863Two-cell status badge with a neutral key against a coloured value, the pairing that makes a wall of these scannable down the value column alone.

Ocean Split Buttonocean-split-button-8543Primary action joined to its own caret segment by an inset rule, so the dropdown half is a separate target rather than a wider button.

Ocean Split Flapocean-split-flap-14783Departure-board character cells split across a hinge, the top leaf folding forward on a stagger so the row clatters through left to right.

Ocean Spotlight Cardocean-spotlight-card-5245Feature card that lights an ocean spotlight behind its top edge on hover — no pointer tracking, no JavaScript.

Ocean Spotlight Overlayocean-spotlight-overlay-3883Product-tour spotlight: everything dims except a breathing circular cutout over the ocean surface.

Ocean Spotlight Revealocean-spotlight-reveal-7931Dimmed ocean image with a soft-light spotlight drifting across it; hover lifts the whole frame.

Ocean Spring Dialog (MD)ocean-spring-dialog-md-3833Alert dialog that springs in past its final size, topped with an ocean badge.

Ocean Squiggle Underlineocean-squiggle-underline-14811Wavy rule from two offset arc gradients rather than a wavy text-decoration, which keeps the amplitude and the two colours under direct control at any font size.

Ocean Squircle Frameocean-squircle-frame-13103Superellipse approximated with a 28-point clip-path, which holds its continuous curvature under scale in a way a border-radius corner visibly does not.

Ocean Stacked Areaocean-stacked-area-10743Two series cut from gradients with `clip-path` over repeating gridlines, so the plot needs no SVG path and still has real axis labels.

Ocean Stacked Usage Barocean-stacked-usage-bar-6199Storage-breakdown bar in ocean with a legend — segments grow left-to-right in sequence.

Ocean Staggered Checklistocean-staggered-checklist-8231Checklist rows sliding in from the left on a per-item delay, each with an ocean dot.

Ocean Staggered Listocean-staggered-list-6075List whose rows arrive 100ms apart with ocean markers — stagger by nth-child, no animation library.

Ocean Star Ratingocean-star-rating-9771Row reversed in flex so a plain sibling combinator lights every star to the left of the pointer — the trick that makes hover ratings work in pure CSS.

Ocean Star Tileocean-star-tile-14411Ten-point clip-path polygon over a conic fill, so the highlight sweeps around the points as the shape turns rather than rotating with them.

Ocean Starburst Badgeocean-starburst-badge-7555Two clipped ten-point stars offset into an ocean sale burst that twists on hover.

Ocean Starfield Driftocean-starfield-drift-8039Two parallax star layers over an ocean horizon glow, drifting at different speeds.

Ocean Status Cell Tableocean-status-cell-table-6835Spaced-row table with ocean status pills in the trailing cell.

Ocean Step Progress Barocean-step-progress-bar-9103Segmented track with nodes at each boundary, the current leg half-filled and its node pulsing — progress and position in one control.

Ocean Sticky Buy Barocean-sticky-buy-bar-9623Price and action pinned to the top of a scrolling pane with negative margins cancelling the padding, so the blur runs edge to edge.

Ocean Sticky Contentsocean-sticky-contents-12183Document outline pinned beside scrolling body copy, the active entry marked by a coloured left rule so the position reads without a filled background.

Ocean Sticky Header Tableocean-sticky-header-table-6777Scrollable table whose header stays pinned, with an ocean scrollbar thumb.

Ocean Sticky Section Headersocean-sticky-section-headers-7175Grouped list whose ocean date headers stick and blur the rows sliding beneath them.

Ocean Stitch Dividerocean-stitch-divider-14091Saddle-stitch seam: a dashed rule offset by a coloured drop-shadow so each stitch appears to sit proud of the surface, shifting half a stitch on hover.

Ocean Story Ring Avatarocean-story-ring-avatar-9171Four-segment ring turning around the avatar while the face counter-rotates at the same rate, so the initials stay upright.

Ocean Stripes (diagonal)ocean-stripes-diagonal-1466Tight diagonal ocean stripe pattern via repeating-linear-gradient.

Ocean Stripes (vertical)ocean-stripes-vertical-1468Tight vertical ocean stripe pattern via repeating-linear-gradient.

Ocean Success Checkmarkocean-success-checkmark-7661Ocean confirmation ring that scales in, then snaps a border-drawn tick into place.

Ocean Success Toastocean-success-toast-11783Confirmation whose tick springs in from its own corner on an overshoot, so the mark lands rather than simply appearing.

Ocean Sunburst Raysocean-sunburst-rays-13851Repeating conic wedges anchored below the frame so only the upper fan is visible, turning slowly under a radial haze that keeps the hub from reading as a hard point.

Ocean Swatch Pickerocean-swatch-picker-10051Colour choices as real radios with selection drawn by `outline` rather than a border, so picking one costs no layout shift.

Ocean Swipe Actionsocean-swipe-actions-12331List row sliding aside to expose the actions parked behind it, the destructive option furthest out so it takes the longest travel to reach.

Ocean Swipe Deckocean-swipe-deck-14703Card thrown off to one side with rotation tied to its travel while the stack behind promotes itself a step, each layer taking the transform the one above just left.

Ocean Sync Arrowsocean-sync-arrows-13011Two gapped arcs cut from one conic gradient with border-drawn heads at each opening, the whole glyph spinning on an ease that speeds through the middle of each turn.

Ocean Tab Overflowocean-tab-overflow-12451Tab strip that stops at the width it has and parks the remainder behind a counted overflow button, the popover anchored to its top-right corner.

Ocean Table Skeletonocean-table-skeleton-8983Three placeholder rows whose sweeps are staggered by a tenth of a second, so the list reads as loading top-down instead of pulsing as one block.

Ocean Tag Inputocean-tag-input-8771Chips and a flexible field sharing one bordered box, with `:focus-within` lighting the whole container rather than just the input.

Ocean Task Strikeocean-task-strike-13171Checkbox and label treated as one gesture — the tick springs in, the rule draws left to right, and the text dims last so the sequence reads as completion rather than deletion.

Ocean Terrazzoocean-terrazzo-11971Seven elliptical chips at irregular positions inside one tile, sized differently so the repeat is much harder to spot than a regular grid.

Ocean Theme Toggleocean-theme-toggle-5867Two-position light/dark switch with an ocean thumb that springs between the sun and moon.

Ocean Thermal Mapocean-thermal-map-12371False-colour heat field from stacked radial gradients under an overlay scanline grid, with a monospace readout for the instrument look.

Ocean Thermometer Meterocean-thermometer-meter-11663Vertical gauge with a scale beside it, the column anchored to the bottom so it fills upward the way a reading actually behaves.

Ocean Thread Skeletonocean-thread-skeleton-11571Comment placeholders with a nested reply indented behind a rule, so the shape of the conversation is visible before any text arrives.

Ocean Three-Way Segmentocean-three-way-segment-8159Light / Auto / Dark segmented control with an ocean pill that springs between radios.

Ocean Ticket Notchocean-ticket-notch-6599Coupon/ticket shape with circular bites cut from both edges — two radial masks intersected, no SVG.

Ocean Ticket Stubocean-ticket-stub-8471Two radial masks bite notches out of an ocean ticket, with a dashed tear line between halves.

Ocean Tilt Card (MD)ocean-tilt-card-md-4197Ocean card that tilts in 3D space on hover and throws its shadow to the side.

Ocean Toast Stackocean-toast-stack-6327Three toasts collapsed into a depth stack with the newest in front — the sonner-style notification pile, in ocean.

Ocean Topographic Contoursocean-topographic-contours-4587Contour-map rings in ocean tones, slowly expanding like a breathing landscape.

Ocean Torn Edgeocean-torn-edge-10103Scalloped seam cut by two offset radial repeats, so the notches interlock into a torn edge rather than a row of even semicircles.

Ocean Traced Border Buttonocean-traced-border-button-8571An ocean conic gradient rotating behind a solid inset face, so only the two-pixel rim reads as light travelling around the edge.

Ocean Transfer Toastocean-transfer-toast-10503Background-job notice carrying a spinner, a bar and a numeric read-out, so the same toast covers both indeterminate and measured phases.

Ocean Transport Controlsocean-transport-controls-7483Play, pause and stop glyphs cut from borders on ocean gradient discs.

Ocean Tree Disclosureocean-tree-disclosure-10543Nested `<details>` forming a file tree, with indentation from the nesting itself so any depth works without new rules.

Ocean Treemapocean-treemap-14051Share-of-total as nested area rather than length, sized with fractional grid tracks so the proportions are declared once and the tiles re-solve at any width.

Ocean Tri-Color Dividerocean-tri-color-divider-2113Three-segment divider with end dots using the ocean palette.

Ocean Triangle Tessellationocean-triangle-tessellation-14571Equilateral tiling from four 60-degree gradient layers on a half-cell offset, the 59px row height being what keeps the triangles equilateral rather than merely pointy.

Ocean Trophy Iconocean-trophy-icon-12263Cup, stem and plinth as three elements with the handles as mirrored pseudo-elements, so the whole award is drawn without an image.

Ocean Typewriter Textocean-typewriter-text-8663Width stepped in whole characters with `steps()` and a caret blinking on its own cycle, so the cursor keeps ticking while the text is paused.

Ocean Typing Indicatorocean-typing-indicator-11143Chat bubble with a clipped tail and three dots bobbing on a rolling delay, resting for most of the cycle so it does not read as frantic.

Ocean Underline Grow (MD)ocean-underline-grow-md-1679Minimal input whose ocean underline grows from left on focus.

Ocean Underline Keylineocean-underline-keyline-11623Rule that draws left-to-right on enter and retracts to the right on leave, by flipping `transform-origin` between the two states.

Ocean Underline Navocean-underline-nav-1945Inline nav with active item marked by an ocean gradient underline.

Ocean Underline Reveal (MD)ocean-underline-reveal-md-1234Link text whose ocean gradient underline grows in from the left on hover.

Ocean Undo Toastocean-undo-toast-9251Confirmation carrying its own reversal, with a timer bar draining by `scaleX` so the countdown animates on the compositor rather than on width.

Ocean Unfold Expandocean-unfold-expand-11583Height animated with `grid-template-rows` from 0fr to 1fr — the one technique that transitions to intrinsic height without a hardcoded max-height.

Ocean Upload Loaderocean-upload-loader-9863File row with a CSS-drawn dog-eared document and a bar that eases as it fills, so the last stretch reads slower the way a real transfer does.

Ocean Upload Ringocean-upload-ring-12531Profile photo wrapped in a conic progress ring that fills as the upload lands, with a camera affordance notched out of the lower-right corner.

Ocean Validation Statesocean-validation-states-7063Paired valid / invalid fields with inline messages, glyphs and matching focus rings in ocean.

Ocean Variable Weightocean-variable-weight-13503Letters travelling from light to heavy on a per-character delay, picking up a vertical gradient as they thicken so the wave of weight is also a wave of colour.

Ocean Verified Badgeocean-verified-badge-10143Scalloped seal cut with an eighteen-point `clip-path` and a tick drawn from two borders, so the whole mark is one element and no SVG.

Ocean Vertical Dividerocean-vertical-divider-10131Column separator whose label runs with the rule via `writing-mode`, so the text rotates without a transform that would break its box.

Ocean Vertical Sliderocean-vertical-slider-12223Level control filling upward with the handle anchored to the fill's top edge, so value and thumb cannot drift apart at any height.

Ocean Vertical Tabsocean-vertical-tabs-8375Side tab rail with a glowing ocean indicator that travels between sections.

Ocean Vertical Testimonial Tickerocean-vertical-testimonial-ticker-7397Quotes scrolling upward behind a top-and-bottom fade, in ocean accent rules.

Ocean Video Modalocean-video-modal-14491Lightbox carrying real player chrome — scrubber, elapsed over total — under a blurred scrim, so the dialog reads as a player rather than a framed image.

Ocean Video Skeletonocean-video-skeleton-14691Placeholder holding a 16:9 stage with an inert play glyph over a scrubber and two metadata lines, so the layout does not shift when the real player mounts.

Ocean Vote Pairocean-vote-pair-11023Up and down controls sharing one arrow drawn from a block and a triangle, the down variant just the same shape rotated.

Ocean Waterfall Chartocean-waterfall-chart-12771Bridge from one period total to the next, each floating bar offset by the running balance beneath it and connected by dashed leader lines so the arithmetic is visible.

Ocean Wave Bandsocean-wave-bands-9983Three oversized near-circles rotating at different rates and directions, which reads as overlapping swells rather than three spinning discs.

Ocean Wave Dividerocean-wave-divider-14063Sine edge assembled from two alternating circle masks rather than an SVG path, the pair scrolling one full period so the crests travel without the band moving.

Ocean Wave Shimmerocean-wave-shimmer-6017Media placeholder with a single ocean highlight crossing it — transform-only, so it stays on the compositor.

Ocean Wave Shimmer (MD)ocean-wave-shimmer-md-2867Skeleton bars with an ocean gradient wave sweeping across.

Ocean Wavy Edgeocean-wavy-edge-10703Section whose bottom is scalloped by a repeating radial mask, so the wave is cut out of the element rather than covered by a shape on top.

Ocean Weather Cardocean-weather-card-13983Current conditions weighted large over a four-day strip, the whole panel tinted by the same hue as the sun mark so the card reads as one sky rather than a chart.

Ocean Wifi Arcsocean-wifi-arcs-14291Three nested rings showing only their top border and rotated 45 degrees, which turns a circle into the quarter-arc the signal glyph is actually made of.

Ocean Wipe Entranceocean-wipe-entrance-9023Container revealed by an inset clip while the label lifts on its own curve, so the box and its contents arrive a beat apart.

Ocean Wireframe Globeocean-wireframe-globe-13691Five circles sharing a centre at even yaw offsets, which reads as a meridian cage once the whole group rotates — no sphere primitive required.

Ocean Wizard Headerocean-wizard-header-11371Segmented flow header where each step's arrow is a rotated square inheriting its own background, so the notch always matches the segment behind it.

Ocean Wizard Stepperocean-wizard-stepper-8519Four-step wizard with completed ticks, a pulsing current step and ocean connector rails.

Ocean Word Rotatorocean-word-rotator-8691A stack of words rolled behind a one-line window, holding on each long enough to read before the next snaps up.

Ocean Woven Textureocean-woven-texture-9411Two opposed diagonal repeats crossing into a basket weave, drifting against each other so the surface shimmers without any element moving.

Ocean X-Ray Sweepocean-x-ray-sweep-12891Inverting backdrop-filter revealed by an animated inset clip, with a lit scan edge riding the boundary so the wipe reads as an instrument passing over the plate.

Ocean Zebra Tableocean-zebra-table-6753Striped data table with an ocean gradient header and a tinted row hover.

Ocean Zigzag Dividerocean-zigzag-divider-12783Sawtooth rule cut with a repeating conic mask rather than drawn as triangles, so the tooth pitch is one background-size value and widens on hover.

Ocean Zoom Caption Tileocean-zoom-caption-tile-3709Image tile that zooms under a darkening scrim while the caption slides up — swap the gradient for your own <img>.

Ocean Zoom Tile (Slate)ocean-zoom-tile-slate-1767Slate framed tile whose ocean content zooms in on hover.

Odometer Counter Meterodometer-counter-meter-15895Running total shown on a mechanical counter — five digit wheels behind a shaded bezel, the four higher ones holding their reading while the red units wheel turns continuously through a strip that ends on a duplicate zero so the loop never jumps.

Offset Twin Buttonoffset-twin-button-14953A solid twin layer sits offset behind the outline and snaps flush underneath it on hover.

Ornate Corner Frameornate-corner-frame-15615Double-ruled plate with flourished corner pieces finished by a bead, the corners drawing further along the rules on hover.

Outline Fill Blue MD Buttonoutline-fill-blue-md-button-0214Outline blue button that fills from left to right on hover.

Overflow Tag Groupoverflow-tag-group-15869Truncated tag list where the +3 counter is not just a count: hovering the group collapses the counter to nothing and unrolls the three hidden tags out of the same space one after another, each widening from zero.

Overflow Tags Popoveroverflow-tags-popover-15701Issue card whose label row ends in a plus-four counter; hovering the row lifts a popover that names the four labels which did not fit, each with its colour dot.

Padlock Togglepadlock-toggle-15087A grey padlock whose shackle lifts and swings open, turning the body emerald when unlocked.

Padlock Unlock Iconpadlock-unlock-icon-15787A brass padlock whose shackle lifts and swings open about its right hinge on hover while the body turns green to confirm the unlock.

Paged Tablepaged-table-15533Invoice rows closed off by a footer that states the visible range and offers numbered pagination with the current page filled.

Paper Plane Send Iconpaper-plane-send-icon-15789A two-tone paper dart clipped from a gradient, which darts up and to the right on hover while three speed dashes settle into place behind it.

Parallax Depth Scrollerparallax-depth-scroller-15905Three ridge layers and a sun pinned behind the copy, each one driven by the scroller’s own scroll timeline at a different rate, so the near ridge travels five times further than the far one as the article moves over them.

Pareto Combo Chartpareto-combo-chart-15799Causes ranked as descending bars with a cumulative percentage line running across them and a dashed eighty percent rule marking where the vital few end.

Particle Driftparticle-driftSixty-four particles that draw a line when they come within range and lean toward the pointer. The links are the effect, and they are why this cannot be a shader.

Password Reveal Togglepassword-reveal-toggle-15341Clicking the eye flips masked dots up out of view and rolls the plain-text password into place, no JavaScript needed.

Password Rules Popoverpassword-rules-popover-15703Sign-up form whose password field drops a rules popover over the field below it, showing a four-segment strength meter and ticking off the requirements already met.

Peek Carouselpeek-carousel-15549Carousel that leaves a dimmed sliver of the neighbouring slides on show, with arrow controls fading in on hover.

Peel Corner Buttonpeel-corner-button-14969The top-right corner folds over like peeling paper on hover, revealing a bright under-layer.

Peeling Corner Tilepeeling-corner-tile-15677A card with a dog-eared corner that peels further back on hover, the folded flap turning over to show the pale reverse of the sheet while the teal saved-to-library mark filed beneath it is uncovered.

Peer Desaturate Strippeer-desaturate-strip-15859Filmstrip of colour cards where touching any one of them drains the colour out of every other card and dims it, while the card under the cursor gains saturation and contrast and steps forward.

Perforated Tear Buttonperforated-tear-button-15633Voucher button whose lower stub is joined by a dotted perforation and folds away on a hinge when hovered, uncovering the redeemed bar printed beneath it.

Perforated Ticket Borderperforated-ticket-border-15129Dashed border with a punched perforation line and semicircular notches, so the stub reads as tearable.

Perspective Crawlperspective-crawl-15207Orange opening-crawl text tilted back into the distance scrolls away from the viewer and holds still on hover.

Perspective Phoneperspective-phone-15203A phone mockup resting at a three-quarter angle that rotates flat to face you on hover while its screen content slides in.

Pin Snap Togglepin-snap-toggle-15573Pin chip whose tack swings upright and turns gold when pinned, the whole chip picking up the same amber outline.

Ping Ripple Loaderping-ripple-loader-14995Concentric rings ripple outward from a glowing center dot and fade as they reach the edge.

Pinned Note Cardpinned-note-card-15651Ruled paper note held by a single push pin, pivoting about the pin head as its transform origin so it swings past level and settles rather than tilting in place.

Piston Pump Loaderpiston-pump-loader-15645Crank-slider engine in miniature: an amber flywheel turns a pin, the connecting rod swings and slides with it, and the piston strokes back and forth inside its cylinder.

Pivot Totals Tablepivot-totals-table-15525Cross-tab of regions against quarters with a tinted totals column and totals row meeting at the grand total.

Pixel Dissolve Buttonpixel-dissolve-button-15359Outline button whose fill materialises as a coarse dot grid that steps down to a solid block, like a low-resolution image resolving.

Plasma Fieldplasma-fieldFour interfering sine waves coloured by their own interference. About fifteen instructions a pixel, which makes it the cheapest full-bleed background here.

Plasma Orbplasma-orbA sphere with a turbulent surface, a fresnel rim and a halo that fades into the page rather than into a black square. Leans toward the pointer.

Play Pause Morphplay-pause-morph-15325A play triangle built from two clipped halves that separate and square off into a pause icon on hover.

Play Row Equalizerplay-row-equalizer-15575Track row where the index number fades out on hover and three bouncing equaliser bars take its place.

Plus Lighter Crossfadeplus-lighter-crossfade-15857Two artwork plates dissolve back and forth in plus-lighter blending, so instead of the usual muddy dip in the middle the overlap adds light and the halfway frame is the brightest one; hovering pauses the dissolve wherever it stands.

Polar Rose Chartpolar-rose-chart-15797Eight equal-angle petals drawn from the centre, each reaching a different radius over faint guide rings so the values read as a rose rather than a row of bars.

Population Pyramid Chartpopulation-pyramid-chart-15793Age bands stacked around a centred label column, with one bar growing left and one growing right so the two populations can be compared band by band.

Presence Toastpresence-toast-15187A pill toast with an overlapping avatar cluster that fans apart on hover to announce who just joined.

Pricing Cards Skeletonpricing-cards-skeleton-15607Three-tier pricing placeholder with the middle card raised and outlined the way a recommended plan usually is.

Process Cycle Ringprocess-cycle-ring-15519Four stage pills pinned around a dashed circle with a coloured arc orbiting it, for a process that never really ends.

Product Detail Skeletonproduct-detail-skeleton-15881Product page placeholder holding its real shape — hero image over a thumbnail strip on the left, title lines, a rating row, a green price block, size chips and a full-width buy bar on the right.

Progress Fill Tagprogress-fill-tag-15079Teal status tag whose background doubles as a 72% progress bar and completes on hover.

Pull Chain Light Switchpull-chain-light-switch-15691A ceiling lamp with a beaded pull chain that stretches downward when you take hold of it, lighting the bulb to amber and dropping a soft cone of light onto the floor below.

Punched Ledger Framepunched-ledger-frame-15889Panel framed as a page torn from a binder — three punched holes cut down the left edge from one stacked box-shadow, a red margin rule beside them and faint horizontal rules across the plate, sliding free of the rings on hover.

Push Detail Stackpush-detail-stack-15685A master list that slides a short way left and dims as the detail panel it points at pushes in from the right edge with a back chevron, the two levels moving together like a phone navigation stack.

Puzzle Piece Tilepuzzle-piece-tile-15495Two jigsaw halves — one with a knob, one with the matching socket cut out by a radial mask — that pull apart on hover.

Quadrant Assemble Entrancequadrant-assemble-entrance-15707Four coloured tiles spin in from the corners one after another and lock together into a two-by-two logo mark, after which the wordmark slides in beside it.

Quadrant Scatterquadrant-scatter-15501Two-by-two scatter plot with crosshair axes and a tinted winning quadrant, points swelling under the cursor.

Quantity Odometer Stepperquantity-odometer-stepper-15841Quantity stepper whose figure lives on a vertical strip, so pointing at plus or minus rolls the next number up into the window like an odometer wheel before you have even clicked.

Quantity Stepper Buttonquantity-stepper-button-15635Single add-to-cart button that rearranges its own layout on hover: the label collapses to nothing while a minus key, a count and a plus key grow out of the ends to form a stepper.

Quantity Stepper Fieldquantity-stepper-field-15289Number input flanked by minus and plus caps that fill with the accent when hovered.

Quilted Paddingquilted-padding-15767Padded upholstery in which two crossing stitch lines cut the surface into diamonds and every diamond swells with its own highlight and shadow.

Quota Warning Alertquota-warning-alert-15453Amber alert carrying its own usage meter, the fill gently throbbing to show how little of the allowance is left.

Radar Sweep Loaderradar-sweep-loader-14989A green radar scope with a rotating sweep beam that lights up two blips as it passes over them.

Radial Bloom Shimmerradial-bloom-shimmer-15605Text placeholder lit by a highlight that blooms outward from the centre of the card rather than sweeping across it.

Radial Dots Meterradial-dots-meter-15145Twelve dots arranged on a ring with eight lit clockwise around a fraction readout; hover previews the ninth.

Radial Fan Entranceradial-fan-entrance-15429Coloured chips swing out one after another from behind a central button, arriving on an arc above it.

Radial Fan Menuradial-fan-menu-15047A fuchsia hub button that spins into an X while four actions fan out along an arc on hover.

Rail Scroll Barrail-scroll-bar-15625Horizontal card rail with a slim gradient scrollbar of its own beneath it, sized to the rail rather than the page.

Range Slider Fieldrange-slider-field-15043Labelled range input with a violet filled track and a thumb that swells with a soft halo on hover.

Ransom Note Textransom-note-text-15383Each letter is its own pasted scrap with a different typeface, paper colour and tilt, all re-shuffling on hover.

Rate Limit Alertrate-limit-alert-15733Throttling notice showing the allowance as ten discrete tokens rather than a bar, each pip flashing bright as it drops back into the bucket one at a time.

Rating Prompt Modalrating-prompt-modal-15169A centred rate-us dialog whose five grey stars light up amber one after another when hovered.

Rating Stars Inputrating-stars-input-15033Five-star radio rating where hovering previews the score and clicking locks it in, no JavaScript.

Receipt Cardreceipt-card-15375Paper till receipt in monospace with dashed rules, a totals line and a zigzag torn edge cut into the bottom by a mask.

Ribbon Toolbar Tabsribbon-toolbar-tabs-15743Office-style ribbon where each tab swaps the strip below for a different captioned group of tool buttons, and every button lifts slightly as it is pointed at.

Ring Chain Dividerring-chain-divider-15059Emerald rings strung evenly along a thin rule, like links on a chain.

Ring Step Dialring-step-dial-15265Circular progress dial split into step arcs with a centre count, where hover previews the next arc lighting up.

Ripple Gridripple-gridA lattice of dots swelling with two waves — a slow one from the centre and a tight ring that arrives with the pointer. Each dot samples at its own cell, so it stays a grid.

Ripple Ring Patternripple-ring-pattern-15227Two sets of concentric sky-blue rings overlap like raindrops on water, brightening on hover.

Rocker Switchrocker-switch-15081Physical O/I rocker switch that tips over in perspective and lights its orange side when checked.

Rocker Switch Buttonrocker-switch-button-15637Hardware rocker sunk into a moulded socket that tips on a perspective from the O side to the I side, its face turning green as the switch takes the ON position.

Rocket Iconrocket-icon-15559Fin-and-porthole rocket over a flame that flickers continuously, the body lifting clear of the exhaust on hover.

Roll In Entranceroll-in-entrance-15431Panel that rolls in from the left, spinning almost a full turn before it settles level.

Roll Label Buttonroll-label-button-14947Button label rolls upward on hover and a second line of text rolls in from below.

Rolling Ball Loaderrolling-ball-loader-14993A patterned ball rolls back and forth along a rail, squashing briefly each time it hits an end.

Rope Twist Dividerrope-twist-divider-15065A rounded cord of alternating diagonal orange strands that reads as a twisted rope.

Rotating Hint Fieldrotating-hint-field-15403Search pill whose placeholder scrolls through example queries on a loop and dims out of the way once you focus it.

Row Action Reveal Tablerow-action-reveal-table-15823File rows whose size column slides away on hover as a strip of edit, download and delete buttons glides in from the right edge to take its place.

Row Reorder Tablerow-reorder-table-15821Stage rows carrying dotted grip handles, where pointing at one lifts it off the table with a shadow and drops a blue insertion line beneath it.

Rubber Stamp Textrubber-stamp-text-15663A ghost impression hanging above the page that slams down square on hover, snapping into focus as a hard inked mark with a distressed rubber texture masked across it.

Ruler Marker Timelineruler-marker-timeline-15267Horizontal tick ruler with month labels and a flagged marker that slides forward on hover.

Ruler Tick Dividerruler-tick-divider-15585Hairline rule graduated with minor ticks every ten pixels and a taller major tick every fifty, like the edge of a ruler.

Runway Lightsrunway-lights-15479Row of lamps that light in sequence toward a glowing chevron, like approach lights guiding the eye along the strip.

Safety Cover Switchsafety-cover-switch-15693A hazard-striped guard hinged along its top edge that swings up and away before the lever underneath can throw, at which point the lever rides to the top of its slot and the status lamp goes green.

Sawtooth Framesawtooth-frame-15609Panel edged with triangular teeth on all four sides, cut by four repeating conic masks the way a postage stamp is perforated.

Scallop Edge Dividerscallop-edge-divider-15061A section that ends in a row of scalloped half-circles trimmed with a rose edge.

Schedule Gridschedule-grid-15535Booking grid with resources down the side and hours across the top, each reservation drawn as a block spanning its slots.

Screen Blend Discsscreen-blend-discs-15345Three primary discs in screen blend mode that add up to white where they overlap, and drift apart on hover.

Screen Share Overlayscreen-share-overlay-15727Shared window ringed in pulsing green with a floating status pill that counts the elapsed time and widens on hover to reveal its microphone and camera toggles.

Scroll Spine Timelinescroll-spine-timeline-15907Delivery tracker whose spine fills from the scroller’s own scroll timeline while each milestone dot lights on its own view timeline as it crosses the dashed read line pinned across the pane.

Scroll Tint Readerscroll-tint-reader-15299Scroll box whose background tints from cool blue to warm rose as you scroll, driven purely by a scroll timeline.

Scroll To Accept Termsscroll-to-accept-terms-15839Licence text scrolling inside a fixed frame that fades out at its bottom edge, above a dimmed accept row whose disabled button explains on hover that the text must be read to the end.

Scrub Preview Thumbnailscrub-preview-thumbnail-15571Video card that steps through four preview frames while hovered, a thin scrub line filling along the bottom as it goes.

Section Dots Navsection-dots-nav-15053Full-page style side dots that stretch into a lime bar and brighten their numbered label on hover.

Section Number Dividersection-number-divider-15067Editorial divider with a bold lime section number, a rule that fades away, and a small caps label at the end.

Segment Bar Steppersegment-bar-stepper-15261Progress stepper made of pill segments where the next segment lights up and swells on hover.

Segment Thumb Previewsegment-thumb-preview-15843Segmented range control whose blue thumb slides under whichever label you point at, previewing the choice on an overshoot curve and settling back on the checked segment when the cursor leaves.

Segmented Choice Radiossegmented-choice-radios-15287Radio group styled as a segmented pill control where the checked option gets a filled, glowing thumb.

Segmented Radio Fieldsegmented-radio-field-15037Three-way segmented control whose emerald puck springs across to whichever radio option is chosen.

Selectable Avatarselectable-avatar-15163Avatar wrapped in a checkbox label that shrinks inside a solid ring and sprouts a check badge when selected.

Selection Toolbarselection-toolbar-15425Floating format bubble that pops above a highlighted phrase with bold, italic, underline, link and quote controls.

Send Planesend-plane-15565Send button whose paper plane launches up and out of the frame when pressed, the label giving way as it goes.

Sequence Diagram Stepssequence-diagram-steps-15809Two dashed lifelines with request arrows crossing between them in order, a solid arrow out, a dashed reply back, and an activation bar marking how long the server was busy.

Settings Accordionsettings-accordion-15465Grouped preference sections that open onto rows of switches, each header chevron flipping as its group expands.

Settings Modalsettings-modal-15447Two-pane settings dialog with a section rail on the left and the active pane on the right, fields and a switch included.

Seven Segment Displayseven-segment-display-15477Two seven-segment digits glowing green behind a dark bezel, with the unlit segments left faintly visible and an occasional flicker.

Share Sheet Modalshare-sheet-modal-15167A pale share sheet with a row of app targets rises over a dimmed page and its icons hop in sequence on hover.

Sheen Ocean MD Buttonsheen-ocean-md-button-0388Ocean gradient button with a diagonal light sheen that sweeps across on hover.

Shield Clip Tileshield-clip-tile-15493Gradient panel clipped to a six-point heraldic shield that scales up and casts a coloured drop shadow on hover.

Shortcut Overlayshortcut-overlay-15451Frosted cheatsheet panel listing keyboard shortcuts as keycaps, rows highlighting as the pointer runs down the list.

Shredded Textshredded-text-15661A printed sheet made of eight vertically clipped copies that sit in perfect register until hover, when the strips slide out of line at different depths and angles like paper through a shredder.

Shutter Split Entranceshutter-split-entrance-15433A panel closed by two lit shutters that part vertically, the heading tightening its letter-spacing as it appears behind them.

Sidebar Nav Skeletonsidebar-nav-skeleton-15603Navigation rail placeholder with a brand row and four icon-and-label rows of uneven width, one of them held as the active item.

Skeleton Loading Tableskeleton-loading-table-15819Real column headers over rounded grey placeholder bars of uneven length, a highlight sweeping across them on a stagger and speeding up while the pointer is over the table.

Skeleton Swap Entranceskeleton-swap-entrance-15711Loading card whose shimmering grey placeholder bars dissolve on cue and are replaced by the real avatar, name and badge rising a few pixels into place.

Skew Banner Buttonskew-banner-button-14971Esports-style slanted banner button that straightens and rounds off on hover.

Skew Ribbon Navskew-ribbon-nav-15051Slanted parallelogram tabs where the orange fill wipes out of the active tab and into the hovered one.

Skew Slide Entranceskew-slide-entrance-15125Panel rushes in from the left leaning into its motion, then straightens up as it stops.

Slate Card Skeleton (Norm)slate-card-skeleton-norm-2751Norm shimmering card placeholder blocks on a slate surface.

Slate Dense Grid (MD)slate-dense-grid-md-6899Monospace md data grid on a slate surface with full cell rules — for logs and console views.

Slate Text Skeleton (Norm)slate-text-skeleton-norm-2749Norm shimmering text placeholder blocks on a slate surface.

Sliced Text Shearsliced-text-shear-15247A word duplicated and clipped into top and bottom halves; on hover the halves shear apart in opposite directions.

Slide Row Menuslide-row-menu-15055Stacked menu rows where hovering sweeps a teal tint bar across the row and slides an arrow into place.

Slide To Confirm Switchslide-to-confirm-switch-15689A deliberate confirmation control whose knob has to travel the full length of the track, dragging a green fill behind it while the shimmering prompt gives way to the completed label.

Slider Value Tooltipslider-value-tooltip-15095Range slider whose thumb carries a sky-blue value bubble that lifts as the thumb grows on hover.

Sliding Door Buttonsliding-door-button-15357Button whose label splits at the centre and slides out to both sides like a pair of doors, revealing a second call to action behind it.

Sliding Tiles Loadersliding-tiles-loader-14985Three square tiles slide around a two-by-two grid, always leaving one empty slot like a sliding puzzle.

Sliding Tooltip Railsliding-tooltip-rail-15697Formatting toolbar served by a single tooltip pill that glides sideways to sit over whichever button the pointer reaches, swapping its label as it travels.

Slope Chartslope-chart-15507Before-and-after slope lines with a dot at each end, showing which series rose and which fell between two periods.

Slug Preview Fieldslug-preview-field-15831Title field with the published address mirrored underneath it, the slugged half highlighted inside a dashed strip and a copy button sliding over the end on hover.

Snake Grid Loadersnake-grid-loader-15367Three-by-three grid of tiles where a lit cell travels the outer ring, leaving a short glowing tail behind it.

Snap Page Stacksnap-page-stack-15301Vertical scroll box that snaps hard between full-height page panels, one section per scroll.

Snap Picker Wheelsnap-picker-wheel-15307Vertical picker wheel that snaps each value into a highlighted centre band with faded edges above and below.

Snap Timeline Railsnap-timeline-rail-15319Horizontally scrolling timeline with snap-aligned milestones on a shared line, dots lighting up on hover.

Snowfall Driftsnowfall-drift-15395Three parallax layers of white flakes falling at different speeds and sizes, the furthest layer blurred for depth.

Soft Emboss Buttonsoft-emboss-button-15361Neumorphic button moulded out of the surface by paired light and dark shadows, which invert so it presses inward when held.

Soft Ripple Buttonsoft-ripple-button-14963Material-style button where a soft ripple ring blooms from the center on press, CSS only.

Solid Blue MD Buttonsolid-blue-md-button-0040Solid blue button with a soft glow shadow and lift-on-hover.

Sort Header Caretsort-header-caret-15851Table header row where pointing at a column raises a half-lit caret to show it can be sorted, the live column keeping a solid caret and a blue underline, and pressing flips the caret end over end.

Sparkle Headingsparkle-heading-15387Warm heading with three clip-path stars that twinkle in and out around the words on staggered delays.

Speaking Avatarspeaking-avatar-15159Voice-call avatar with rings that ripple outward from the disc to show the person is currently speaking.

Spectrum Hue Sliderspectrum-hue-slider-15309Range input whose track is a full colour spectrum, with a transparent ring thumb that shows the hue underneath.

Spinning Coinspinning-coin-15205A lime coin with a visible rim built from stacked discs spins on its vertical axis and speeds up on hover.

Split Auth Modalsplit-auth-modal-15173A two-pane sign-in dialog with a violet artwork panel beside a compact form that lifts and tints its fields on hover.

Split Heading Entrancesplit-heading-entrance-15123Two words slide in from opposite edges and lock together into a single headline.

Split Pane Gripsplit-pane-grip-15863The separator holding an editor and its preview apart is a working splitter: reaching for the nine-pixel channel lights it blue, stretches its three grip dots and pushes a pair of arrowheads out into each pane to say which way it drags.

Split Slide Textsplit-slide-text-15013Heading cut horizontally through the middle whose upper and lower halves shear apart on hover.

Split-Tone Bordersplit-tone-border-15133Thick rounded border coloured magenta on the top-right and cyan on the bottom-left, swapping halves on hover.

Spreadsheet Range Gridspreadsheet-range-grid-15817Worksheet with a name box and formula bar over lettered columns and numbered rows, one column selected as a single outlined range complete with a fill handle at its corner.

Spring Squish Buttonspring-squish-button-14959Springy button that overshoots as it grows on hover and squashes like jelly on press.

Springy Tooltip Popspringy-tooltip-pop-15335Hovering the trigger pops a sky-blue tooltip with an arrow up above it using an overshooting spring easing.

Squircle Morph Togglesquircle-morph-toggle-15083A square thumb in a square track that slides across, spins and morphs into a circle inside a fuchsia pill when checked.

Stacked Toast Overlaystacked-toast-overlay-15723Three notifications piled in the corner of a page with only their top edges showing, springing apart into a readable column while the pointer is over the page.

Stacking Blocks Loaderstacking-blocks-loader-15371Amber blocks fall one by one and squash on landing to build a small tower, which holds a beat and then clears to start again.

Stamp Perforation Maskstamp-perforation-mask-15769A postage stamp whose perforated border is punched by uniting a repeating grid of circular holes with a solid inner rectangle, so the bites land only on the four edges; it tilts and glows when picked up.

Stamp Slam Entrancestamp-slam-entrance-15127A rubber-stamp label drops from oversized and slams onto the surface with a tilted, inked landing.

Star Burst Togglestar-burst-toggle-15085Favorite toggle whose star fills amber, spins into place and fires an expanding ring when checked.

Star Rating Fieldstar-rating-field-15829Five-star input showing a saved rating of four, where sweeping across it clears the stored fill and repaints the row up to whichever star sits under the pointer.

Stat Tiles Skeletonstat-tiles-skeleton-15109Three KPI tile placeholders, each with a label bar, emerald-tinted number bar and a tiny sparkline.

Stencil Plate Textstencil-plate-text-15657A riveted metal stencil with the word cut out of it lies over the page, then lifts away on hover to reveal the grainy sprayed paint that went through the openings.

Step Area Chartstep-area-chart-15249A staircase step chart drawn as a clip-path polygon over a gridded plot area, with a sky-blue area fill and day labels.

Sticky Asidesticky-aside-15627Order summary pinned to the top of its column while the list beside it scrolls past, staying in reach the whole way down.

Sticky Card Pilesticky-card-pile-15903Steps that clamp to four staggered bottom offsets, so at rest they sit piled at the foot of the scroller with twenty pixels of each showing and peel away one by one as the list scrolls past them.

Sticky Day Pills Threadsticky-day-pills-thread-15305Chat thread scroller where each day divider pill sticks to the top until the next day pushes it away.

Sticky Media Panelsticky-media-panel-15631Article layout where the image sticks to the top of the viewport while the copy alongside it keeps scrolling.

Sticky New Dividersticky-new-divider-15629Unread-messages rule in a chat log that pins to the top of the scroller so the boundary stays visible while you read past it.

Sticky Total Footersticky-total-footer-15297Scrollable line-item list whose total row stays pinned to the bottom edge while the items scroll beneath it.

Stitched Leather Borderstitched-leather-border-15137Solid dark rim with a pale dashed seam stitched just inside it, the seam pulling tighter to the edge on hover.

Stitched Patch Buttonstitched-patch-button-14957Fabric-patch button with a dashed stitch seam inside its edge that loosens on hover.

Story Progress Barsstory-progress-bars-15271Story-style segmented progress bars where the active segment fills on a loop and pauses on hover.

Story Progress Reelstory-progress-reel-15779A stories-style slide topped by five segment bars, two already spent and the third filling steadily across its track while the author strip and caption sit over the artwork.

Streak Flame Badgestreak-flame-badge-15599Day-streak pill carrying a two-layer flame whose outer and inner tongues flicker against each other out of phase.

Streak Week Meterstreak-week-meter-15623Seven day cells reading a week at a glance — filled for done, outlined red for missed, and a dashed pulse on the day still open.

Success Modalsuccess-modal-15449Confirmation dialog centred on a green tick disc that keeps sending a soft halo outward, with a single dismiss action.

Sunburst Rayssunburst-rays-15235Amber sunburst rays from a repeating conic gradient rotate slowly around a glowing centre disc.

Swing-In Cardswing-in-card-15121Card swings in around its top-left corner like a hinged sign, overshooting slightly before hanging level.

Swinging Badgeswinging-badge-15209A conference ID badge hanging from a rose lanyard sways side to side with a subtle Y-axis twist and swings faster on hover.

Synthwave Floor Tilesynthwave-floor-tile-15029Retro synthwave scene with a striped sun and a cyan perspective grid that rolls toward the viewer.

Table Of Contents Navtable-of-contents-nav-15045Docs-style on-this-page list where the indigo rail marker jumps to whichever heading is hovered.

Tag Chip Inputtag-chip-input-15295Text field that holds removable tag chips inline, with the chip close buttons and the field border reacting on hover and focus.

Folded Corner Tagtag-foldedAn amber price tag with a notched right edge using clip-path — perfect for discount or sale labels.

Tape Label Buttontape-label-button-15363Strip of masking tape stuck on askew, its ends torn into a ragged clip-path and its surface crossed by a woven sheen, springing straight when hovered.

Taped Corner Frametaped-corner-frame-15611Photographic print mounted by four translucent tape strips across its corners, the top pair peeling further out on hover.

Tartan Plaid Setttartan-plaid-sett-15761A woven tartan sett built from one asymmetric band group crossed over itself, so the navy blocks, pale checks and thin yellow over-check darken and brighten where they overlap.

Tartan Plaid Tiletartan-plaid-tile-15027Rose tartan built from crossing translucent stripes of three widths, layered into a woven plaid.

Temperature Slidertemperature-slider-15551Thermostat slider whose track runs cool to hot across its length, the thumb picking up a warm halo as it is grabbed.

Terminal Window Cardterminal-window-card-15003A mock terminal card with traffic-light dots and a prompt whose cursor starts blinking on hover.

3D Layered Texttext-3dBold white text built up from six magenta shadow layers, creating a chunky retro 3D extrusion that lifts on hover.

Gradient Drop-Shadow Texttext-clipBold text filled with an indigo-to-pink gradient, lifted off the page by a soft colored drop-shadow.

Glitch Texttext-glitchCyberpunk-style distorted text with two clip-pathed colored ghosts that shift independently.

Animated Gradient Texttext-gradientBold heading text filled with a flowing five-color gradient that scrolls continuously.

Neon Glow Texttext-neonWhite text surrounded by layered cyan shadows that flicker like an old neon sign.

Reveal Mask Texttext-revealText filled with a multi-color gradient that pans across the letters and pauses, then sweeps back to repeat.

Shimmer Texttext-shimmerSubtle slate text with a bright gold highlight band that sweeps across continuously.

Typewritertext-typewriterMono-spaced text that types itself out character by character with a blinking caret, then re-types.

Wave Bounce Texttext-waveEach letter bounces up and down with a staggered delay, producing a rolling wave across the word.

Tick Spinner Loadertick-spinner-loader-15369Twelve radial ticks around a circle, each fading out in turn so a bright head appears to sweep the dial.

Ticker Bannerticker-banner-15185An orange announcement bar with a LIVE tag and an edge-faded marquee message that scrolls continuously and pauses on hover.

Ticker Line Meterticker-line-meter-15149Dozens of hairline bars masked from a single gradient, the lit run brightening toward its end and growing on hover.

Ticket Stub Cardticket-stub-card-14999An event ticket with notched edges and a perforated line whose stub tears away slightly on hover.

Ticket Stub Tagticket-stub-tag-15071Amber admission-ticket tag with punched notches and a perforated stub that tilts on hover.

Ticking Clock Iconticking-clock-icon-15563Analogue clock face with hour ticks and three hands, the red second hand stepping round in sixty discrete jumps.

Time Picker Fieldtime-picker-field-15543Segmented time field with separate hour and minute boxes that tint on focus and an AM/PM switch pinned to the right.

Timeline Year Tabstimeline-year-tabs-15741Tab strip drawn as a dated axis, with year ticks along a rail and a glowing marker that slides between them while the milestone below swaps in from the side.

Timer Bordertimer-border-15613Outline that draws itself edge by edge around the panel on a four-second cycle, the way a countdown ring reads on a rectangle.

Tip Callouttip-callout-15457Quiet hint panel with a small bulb in the gutter that lights up warm amber when the callout is hovered.

Toast Stack Skeletontoast-stack-skeleton-15877Notification stack placeholder with two dimmed toasts peeking out behind the front card, whose icon, title and body bars carry the sweep; hovering fans the pile apart.

iOS Toggle Switchtoggle-iosA pure-CSS iOS-style toggle with a hidden checkbox, smooth slide, and accessible focus ring.

Tooltip on Hovertooltip-hoverA dark chip that reveals a small floating tooltip with an arrow above it on hover, using only pseudo-elements.

Torchlight Reveal Masktorchlight-reveal-mask-15771A word sunk almost invisibly into a dark panel, legible only inside a circular clip path that drifts back and forth across it like a torch beam.

Torn Paper Edgetorn-paper-edge-15239An amber receipt card whose bottom edge is clipped into a ragged torn-paper polygon that stretches on hover.

Tracking Bloom Buttontracking-bloom-button-14967Typographic button whose letters spread apart while a green glow blooms from inside.

Tree Tabletree-table-15527File-tree table with disclosure arrows and two levels of indentation, sizes right-aligned in tabular figures.

Triangle Mosaic Tiletriangle-mosaic-tile-15031Four-tone conic gradient tiles into a low-poly triangle mosaic in fuchsia and magenta.

Truchet Arc Mazetruchet-arc-maze-15667Quarter-circle arcs tiled in two alternating orientations so their ends meet across every cell edge, forming one continuous looping labyrinth that a wave of brightness travels through diagonally.

Tunnel Ringstunnel-rings-15475Cyan frames flying out of the distance toward the viewer on a loop, fading in far away and out as they pass the plane.

Turntable Deckturntable-deck-15747A record deck laid back into the picture plane, the platter raised above the plinth and turning under a tonearm that creeps slowly inward across the grooves.

Turntable Ring Carouselturntable-ring-carousel-15317Six cards arranged on a 3D ring that turns continuously and pauses while hovered.

Twisting Ribbontwisting-ribbon-15473A row of gradient slats that each turn a half revolution on a delay, so a twist travels along the ribbon and back.

Type-to-Confirm Dialogtype-to-confirm-dialog-15445Destructive dialog whose delete button stays disabled and dull until the confirmation field is engaged, then turns live red.

Typewriter Entrancetypewriter-entrance-15117Monospace line types itself out character by character behind a caret that blinks a few times and settles.

Typewriter Fill Skeletontypewriter-fill-skeleton-15883Text placeholder that writes itself in rather than shimmering — each bar grows from zero width behind a blue caret that hands off to the line below, so the card fills top to bottom like typed copy.

Unblur Revealunblur-reveal-15581Card holding blurred private figures that sharpen into focus on hover as the prompt underneath fades away.

Underline Box Buttonunderline-box-button-14955A minimal text button whose underline grows upward into a soft tinted box on hover.

Underline Grow Fieldunderline-grow-field-15291Borderless field with a thin bottom rule where an accent underline grows outward from the centre on focus.

Undo Toast Timerundo-toast-timer-15337Hover the row to see it swap for a dark toast offering Undo, with an amber timer bar draining beneath it.

Unfolding Boxunfolding-box-15471Four indigo flaps hinged to an isometric base that swing outward together to reveal the mark printed inside.

Update Ready Toastupdate-ready-toast-15181A sky-blue app-update toast with a pinging status dot and a restart button that brightens and swells on hover.

Upload Listupload-list-15545Drop target followed by one row per file, each carrying its own progress bar and a done, percentage or failure marker.

URL Prefix Fieldurl-prefix-field-15039Domain input with a fixed https:// addon that fills sky blue and pops a checkmark once the field is focused.

Usage Bar Tableusage-bar-table-15277Quota table with an inline progress bar per row that thickens and brightens when the row is hovered.

Variance Metervariance-meter-15899Signed deviation read from a centre zero rather than from the left edge — the amber fill runs right of the line for over-plan and a green one runs left for under, with a dashed target marker and a readout that swaps sign as the value crosses on hover.

Venetian Blind Slatsvenetian-blind-slats-15671Seven slats hinged on their own horizontal axes that tilt shut and swing open again one after another, letting a lit sky and its low sun show through the gaps as they turn.

Venn Exclusion Maskvenn-exclusion-mask-15773Two overlapping discs composited with mask exclusion so the lens where they meet is punched clean out, leaving a pair of gradient crescents that swing and repaint on hover.

Venn Overlap Chartvenn-overlap-chart-15803Three translucent discs blended together so every intersection lightens, with the audience count printed in each exclusive region and in the shared centre.

Verified Check Avatarverified-check-avatar-15155Ringed initials avatar with a verified check badge tucked into the corner that pops larger on hover.

Voxel Wavevoxel-wave-15749A three by three field of isometric cubes, each built from a lit top and four shaded walls, riding up and down on a diagonal wave that crosses the grid.

Waffle Grid Meterwaffle-grid-meter-15897Percentage drawn as a hundred-cell waffle, one square per point, sixty-eight of them lit in a blue-to-indigo run that stops part way through a row; hovering lights the next seven in a paler tint to preview the charge.

Waffle Pictogram Chartwaffle-pictogram-chart-15801Fifty squares in a ten-wide grid with thirty-four of them filled, so the proportion can be counted square by square instead of read off an axis.

Wallet Sleeve Cardwallet-sleeve-card-15649A payment card tucked into a pocket with a semicircular thumb notch cut out of its top edge, riding up out of the sleeve on hover to show the full number.

Wave Column Risewave-column-rise-15435Bar columns growing up from the baseline in a scattered order rather than left to right, so the group arrives as a wave.

Wave Letters Textwave-letters-text-15381Heading whose letters rise and fall on a delayed sine so a wave travels through the word, shifting hue at the crest.

Wax Seal Badgewax-seal-badge-15593Irregular blob of sealing wax with a highlight, an inner shadow and initials pressed into it, tilting when hovered.

Wheel Picker Reelwheel-picker-reel-15783A drum of month labels standing on a 3D cylinder, fading as they curve away from the lit selection band, and rolling on by one notch when hovered.

Wizard Dialogwizard-dialog-15175A pale multi-step onboarding dialog with a segmented progress bar that advances a step and nudges its continue button on hover.

Wizard Steps Accordionwizard-steps-accordion-15737Setup accordion whose sections are numbered nodes threaded on a vertical rail, finished steps collapsing to a green tick and a summary while the current step stays open.

Wood Grain Boardwood-grain-board-15763A sawn timber board whose grain is drawn from three horizontal line periods that never line up, with a ringed knot swirling near the right edge.

XP Level Barxp-level-bar-15151Game-style experience bar bracketed by current and next level badges, gaining a chunk of XP on hover.

Zigzag Chevron Patternzigzag-chevron-pattern-15225Teal zigzag chevron stripes built from four layered gradients that slide sideways on hover.

Zigzag Receipt Edgezigzag-receipt-edge-15135Receipt-style panel with a sawtooth torn bottom edge cut by clip-path and a coloured tape line on top.

Zone Scale Meterzone-scale-meter-15621Graduated pressure strip split into safe, warning and danger bands, with a pointer drifting across the reading.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information