# Nuancier

> Nuancier is a library of 574 animated web components — backgrounds (WebGL shaders), cursor effects, text effects and UI pieces — in plain HTML, CSS and JavaScript, free to copy into any project, also exportable as React or Vue components. It also sells 34 complete landing-page templates (one-time price) and offers 14 design styles that AI coding agents (Claude Code, Cursor, Copilot) can follow.

Every component can be previewed live, tuned (colors, speed, size) and copied. No npm package and no account are needed; the copied code has no dependency on Nuancier.

## Main pages

- [Components](https://nuancier.dev/components): browse and copy all 574 components, filter by category or style.
- [Templates](https://nuancier.dev/templates): 34 complete landing pages, live preview, one-time purchase.
- [Styles for AI agents](https://nuancier.dev/styles): 14 design systems as SKILL.md / rules files for Claude Code, Cursor and Copilot.
- [Skills](https://nuancier.dev/skills): ready-made instructions and tools for AI coding agents.

## Templates (one-time price)

- [Relay](https://nuancier.dev/pro/relay): Developer tool website, dark precision style. €29.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/c728f83d-6df0-4256-bc25-2d31e1ed36b5
- [Maison](https://nuancier.dev/pro/maison): Luxury fashion website, editorial serif style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/f81da5cd-a09f-4cc5-af55-609938a3ca4b
- [Invoicy](https://nuancier.dev/pro/brutal): Freelance SaaS website, neobrutalism style. €39.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/e25fc798-302c-4516-a67d-5d7829f6ece0
- [Raster](https://nuancier.dev/pro/raster): Design studio website, swiss international style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/7f69bd7f-e1f2-40ff-b508-84fe2ce2ec54
- [tern](https://nuancier.dev/pro/phosphor): CLI tool website, retro crt terminal style. €4.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/d5a8a1b3-6e8a-4249-9a7a-2dca03edb9d9
- [Hyperbloom](https://nuancier.dev/pro/hyperbloom): Music festival website, y2k chrome style. €19.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/e2493b25-8f67-4a8e-9eb9-acef6557f65d
- [Pebble](https://nuancier.dev/pro/pebble): Mobile app website, soft clay style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/b9e1f802-387b-4cfa-85e0-f616bbba4345
- [Terroir](https://nuancier.dev/pro/terroir): Coffee roaster website, organic earthy style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/0d4fc394-8bfc-4b4b-8fb4-8fe5bdd14d26
- [Pixelforge](https://nuancier.dev/pro/desktop95): Indie game engine website, windows 95 desktop style. €9.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/cf6a12e1-c669-44e7-a42d-6de0b963b240
- [Stillwater](https://nuancier.dev/pro/stillwater): Wellness app website, glass aurora style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/5bccdacf-8a72-45d6-8190-e5a92de359a8
- [The Ledger](https://nuancier.dev/pro/ledger): Newspaper website, classic editorial style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/2852f8c7-8f69-4258-97ad-a0e2546bbd8f
- [Neon Rift](https://nuancier.dev/pro/rift): Game launch website, cyberpunk synthwave style. €9.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/47fd1a9b-20c3-43a2-b64f-c12862ce4c65
- [Atelier Nord](https://nuancier.dev/pro/nord): Architecture studio website, nordic minimal style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/d5d04ab1-dea3-4df4-a3c2-6859a9cedcac
- [Ferro](https://nuancier.dev/pro/ferro): Fintech website, deep navy gradient style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/a787d767-89b9-4b1a-8207-0d3bfdc7f78e
- [Halo One](https://nuancier.dev/pro/halo): Product launch website, clean product showcase style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/f499ee5e-1fda-402e-bde4-e29c55fbd6d0
- [Maison Lune](https://nuancier.dev/pro/lune): Hair salon website, soft editorial style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/445910d3-8d38-4d10-a180-5fc3e9a01135
- [Tasklane](https://nuancier.dev/pro/tasklane): SaaS website, clean light saas style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/3e84ab80-6164-48eb-a058-7807d3bcb984
- [Veil VPN](https://nuancier.dev/pro/veil): VPN website, dark security style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/a8b9b66c-8677-42d2-9607-923818d8a334
- [Nimbus](https://nuancier.dev/pro/nimbus): AI assistant website, warm ai minimal style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/0104e330-8ad3-4e4b-8741-4345e0cf2e9c
- [Le Fournil](https://nuancier.dev/pro/fournil): Bakery website, rustic warm style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/eb2e7d5f-1bf0-4c32-a6b2-c054983f5a47
- [Sora](https://nuancier.dev/pro/sora): Restaurant website, japanese ink style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/dfa6eb86-23b0-4a87-b4d6-f263b91affc3
- [FORGE](https://nuancier.dev/pro/forge): Gym website, athletic bold style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/5175ae74-81ac-4f29-8517-a80ce031d72b
- [Habitat](https://nuancier.dev/pro/habitat): Real estate website, refined property style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/1fc7900c-e5e6-4766-9a31-7433fb5333ec
- [Brightside](https://nuancier.dev/pro/brightside): Dental clinic website, calm medical style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/295932f3-053e-4092-9963-27cba6cf2ba1
- [Iris Okafor](https://nuancier.dev/pro/iris): Photographer website, dark gallery style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/673b20ee-1768-4c4d-a0c1-6d1cf57c6fe0
- [Atlas](https://nuancier.dev/pro/atlas): Travel agency website, sunny adventure style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/543f568b-d019-4a72-899b-169c53cfc66d
- [Vance & Hale](https://nuancier.dev/pro/vance): Law firm website, classic authority style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/91230f4e-4306-46b8-bddb-0b4d39d818f6
- [Sprout Code](https://nuancier.dev/pro/sprout): Kids coding school website, crayon playful style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/d6e93fee-3f83-4762-984a-f499113ae7ee
- [Late Signal](https://nuancier.dev/pro/signal): Podcast website, night radio style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/ec26322d-ef43-49bf-8ab8-4fb76c558896
- [Pétale](https://nuancier.dev/pro/petale): Florist website, pastel botanical style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/ae68e3b2-e892-40d4-9c5d-233be5c4afe6
- [Prism](https://nuancier.dev/pro/prism): Design SaaS website, liquid glass style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/7520388a-2fbd-406f-afc7-11aefa88a4a3
- [Cadence](https://nuancier.dev/pro/cadence): Calendar SaaS website, apple-style clean style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/5efbcaf2-9d7f-471a-958d-dd9d00215827
- [Frost](https://nuancier.dev/pro/frost): Meeting AI SaaS website, spatial glass style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/5a31d074-9951-4a44-a484-955141aeb1b0
- [Durand & Sons](https://nuancier.dev/pro/durand): Craftsman website, premium craft, real photography style. €49.99. Buy: https://nuancier.lemonsqueezy.com/checkout/buy/2267318b-4488-46e7-ba5b-795fe96c77f3

## Styles for AI coding agents

- Nocturne: Precision dark SaaS: sheen, subtle glows, zero noise.
- Monochrome: Precision black and white, visible grid, Geist everywhere.
- Mesh Gradient: Crisp white under a halo of vivid color: fintech you can trust.
- Studio Bold: Creative agency: giant condensed caps, electric blue.
- Apple Minimal: White, air, precision. The product at the center.
- Terminal Dark: Monospace everything. For tools you launch from the keyboard.
- Éditorial: A magazine: columns, standfirst, drop cap.
- Luxury Serif: Couture house: spaced capitals, gold and silence.
- Néobrutalisme: Thick outlines, hard shadows, bold colors.
- Corporate Trust: Reliable blue, visible numbers, zero surprises.
- Swiss Grid: Strict grid, signal red, enormous type.
- Glass Aurora: Frosted glass over a colorful aurora.
- Rétro 95: Beveled windows, desktop grey, unapologetic nostalgia.
- Soft Clay: Modeling clay: puffy shapes, soft pastels.

## Skills

- Review notes: Right-click your site, leave a note, your agent does the change.
- Responsive pass: Measures the page at 375, 768 and 1440 px and fixes what overflows.
- Motion safety: Reduced motion, loops that stop, compositor-only animations.
- Design polish: Removes the template look: spacing, type, colour, states.

## Components

### Text effects (51)

- [Split Reveal](https://nuancier.dev/c/split-reveal): Letters rise one by one from below the line.
- [Decrypt Text](https://nuancier.dev/c/decrypt): The text decrypts character by character on hover.
- [Rotating Word](https://nuancier.dev/c/rotating-word): A word that changes inside a pill that adapts to its width.
- [Shiny Text](https://nuancier.dev/c/shiny-text): A light sweep crosses the text in a loop.
- [Count Up](https://nuancier.dev/c/count-up): A number that counts up to its value when it comes into view.
- [Typewriter](https://nuancier.dev/c/typewriter): Types and erases sentences, with a blinking cursor.
- [Blur In](https://nuancier.dev/c/blur-in): Each word comes out of the blur, one after another.
- [Marker Highlight](https://nuancier.dev/c/marker): A highlighter stroke sweeps under the key words.
- [Circular Text](https://nuancier.dev/c/circular-text): Text spinning in a circle around a logo, faster on hover.
- [Wave Letters](https://nuancier.dev/c/wave-letters): Letters ripple as the mouse passes over them.
- [Flip Counter](https://nuancier.dev/c/flip-counter): Flap counter: each digit flips when it changes.
- [Glitch Text](https://nuancier.dev/c/glitch): Two offset copies in red and cyan that jitter.
- [Number Ticker](https://nuancier.dev/c/number-ticker): Each digit rolls vertically to its value, like a mechanical counter.
- [Scroll Reveal Text](https://nuancier.dev/c/text-reveal-scroll): Words light up as the block scrolls.
- [Outline Text](https://nuancier.dev/c/gradient-border-text): An outlined heading that fills on hover, letter by letter.
- [Kinetic Headline](https://nuancier.dev/c/kinetic-marquee-text): Two giant lines scrolling in opposite directions, speeding up on scroll.
- [Text Pressure](https://nuancier.dev/c/text-pressure): Letters stretch and thicken near the cursor.
- [True Focus](https://nuancier.dev/c/true-focus): A cornered frame moves from word to word, the others stay blurred.
- [Falling Text](https://nuancier.dev/c/falling-text): On click, the words fall and bounce at the bottom of the frame.
- [Fuzzy Text](https://nuancier.dev/c/fuzzy-text): A heading that crackles like a scrambled signal, stronger on hover.
- [Proximity Weight](https://nuancier.dev/c/variable-proximity): Each letter grows and thickens based on its distance to the cursor.
- [Text Loop](https://nuancier.dev/c/text-loop): A word that changes in a loop, the width adjusts smoothly.
- [Curved Marquee](https://nuancier.dev/c/curved-loop): A text band scrolling along a curve, direction set by dragging.
- [Split-Flap Text](https://nuancier.dev/c/split-flap): Train-station board: each cell flips through the letters.
- [Echo Text](https://nuancier.dev/c/echo-text): Outlined copies of the heading drift away behind it.
- [ASCII Text](https://nuancier.dev/c/ascii-text): A word redrawn in rippling ASCII characters.
- [Animated Gradient Text](https://nuancier.dev/c/mu-animated-gradient-text): Text filled with a gradient that slides in a loop (orange to purple by default).
- [Animated Shiny Text](https://nuancier.dev/c/mu-animated-shiny-text): A light sheen sweeps across subtle text, then pauses.
- [Aurora Text](https://nuancier.dev/c/mu-aurora-text): A word filled with an aurora gradient that ripples, turns and breathes softly.
- [Line Shadow Text](https://nuancier.dev/c/mu-line-shadow-text): A heading whose drop shadow is made of fine scrolling hatch lines.
- [Number Ticker](https://nuancier.dev/c/mu-number-ticker): A number springing up to its value as soon as it enters the screen.
- [Spinning Text](https://nuancier.dev/c/mu-spinning-text): A sentence laid out in a circle that spins endlessly, like a stamp.
- [Comic Text](https://nuancier.dev/c/mu-comic-text): A comic-book heading: yellow letters with red dots, thick black outline, offset shadow, bouncy entrance.
- [Kinetic Text](https://nuancier.dev/c/mu-kinetic-text): Each hovered letter thickens and spreads, its neighbors follow a little: the word breathes under the mouse.
- [Hyper Text](https://nuancier.dev/c/mu-hyper-text): Letters scramble through random characters then lock one by one onto the real word; replays on hover.
- [Typing Animation](https://nuancier.dev/c/mu-typing-animation): Text types itself letter by letter with a blinking cursor; can also delete and cycle through words.
- [Morphing Text](https://nuancier.dev/c/mu-morphing-text): Words melt into each other through a liquid blur, like wax changing shape.
- [Sparkles Text](https://nuancier.dev/c/mu-sparkles-text): Four-pointed stars are born, spin and fade continuously around a heading.
- [Text Reveal](https://nuancier.dev/c/mu-text-reveal): As you scroll, each word of a sentence goes from pale gray to black, in order.
- [Scroll Based Velocity](https://nuancier.dev/c/mu-scroll-velocity): Two text bands scrolling continuously that speed up, or reverse, with the scroll speed.
- [Video Text](https://nuancier.dev/c/mu-video-text): A giant word cut out like a stencil, showing a video through it (here an animated gradient).
- [Text 3D Flip](https://nuancier.dev/c/mu-text-3d-flip): On hover, each letter flips in 3D like the face of a cube to reveal its colored twin, in a cascade.
- [Dia Text Reveal](https://nuancier.dev/c/mu-dia-text-reveal): A band of bright colors sweeps across the text from left to right and leaves it revealed, word after word if you like.
- [Text Shimmer](https://nuancier.dev/c/mp-text-shimmer): A dark sheen slides over gray text in a loop, like an “in progress” indicator.
- [Text Shimmer Wave](https://nuancier.dev/c/mp-text-shimmer-wave): A wave runs through the text: each letter moves forward in 3D, grows and darkens in turn.
- [Text Scramble](https://nuancier.dev/c/mp-text-scramble): Text scrambles into random characters then settles from left to right; replays on hover.
- [Text Roll](https://nuancier.dev/c/mp-text-roll): Each letter tips backward while its copy rolls in from below, in a cascade; replays on click.
- [Text Morph](https://nuancier.dev/c/mp-text-morph): When the word changes, shared letters glide to their new place and the others fade in or out.
- [Sliding Number](https://nuancier.dev/c/mp-sliding-number): A counter where each digit slides vertically on a spring, odometer-style.
- [Text Loop](https://nuancier.dev/c/mp-text-loop): A word changing in a loop: the old one rises and fades while the new one comes in from below.
- [Letter Wave Loader](https://nuancier.dev/c/letter-loader): The word "Loading" whose letters rise and light up one by one in a wave, followed by three blinking dots.

### Interaction (24)

- [Magnet Button](https://nuancier.dev/c/magnet-button): The button is pulled toward the cursor, then springs back.
- [Click Spark](https://nuancier.dev/c/click-spark): Every click throws out sparks.
- [Spotlight Card](https://nuancier.dev/c/spotlight-card): A glow follows the mouse across the card and its border.
- [Tilt Card](https://nuancier.dev/c/tilt-card): The card tilts in 3D toward the cursor, with a glare.
- [Ripple Button](https://nuancier.dev/c/ripple): A ripple starts from the exact point you click.
- [Border Beam](https://nuancier.dev/c/border-beam): A beam of light travels around the border continuously.
- [Cursor Trail](https://nuancier.dev/c/cursor-trail): A trail of dots follows the cursor with a delay.
- [Before / After](https://nuancier.dev/c/compare): Drag the handle to compare two versions.
- [Like Burst](https://nuancier.dev/c/like-burst): The heart bounces and bursts into sparks when liked.
- [Swipe Stack](https://nuancier.dev/c/swipe-stack): A stack of cards you swipe aside to reach the next one.
- [Dock Magnify](https://nuancier.dev/c/dock): Icons grow in a wave under the cursor, like a dock.
- [Fluid Glass](https://nuancier.dev/c/fluid-glass): A liquid glass lens that follows the mouse and magnifies what it passes over.
- [Orbiting Circles](https://nuancier.dev/c/mu-orbiting-circles): Icons circling on two concentric orbits, the inner one in reverse.
- [Lens](https://nuancier.dev/c/mu-lens): A round magnifier follows the mouse and enlarges the content below, with a small pop-in.
- [Animated Beam](https://nuancier.dev/c/mu-animated-beam): Orange to purple light beams travel along curved links between nodes.
- [Cool Mode](https://nuancier.dev/c/mu-cool-mode): Holding the button down sprays a burst of colorful bubbles that spin and fall.
- [Magnetic](https://nuancier.dev/c/mp-magnetic): A button pulled toward the mouse as it approaches, on a very bouncy spring.
- [Sortable List](https://nuancier.dev/c/sortable-list): A list you reorder by dragging rows by their handle (mouse or touch), or with Alt + arrow keys.
- [Searchable FAQ Accordion](https://nuancier.dev/c/faq-search): A FAQ accordion with a search field: questions filter while typing, matches are highlighted in questions and answers, matching answers open by themselves and a message shows when nothing matches.
- [Orbiting Avatar Group](https://nuancier.dev/c/avatar-orbit): A central avatar with two orbits of avatars spinning in opposite directions; hovering an avatar pauses its orbit and shows a tooltip with name and role, also reachable with Tab.
- [Reaction Picker Popover](https://nuancier.dev/c/reaction-picker): A Like button that opens, on long hover, click or Enter, a bar of reactions popping in one by one and growing under the pointer; the chosen reaction replaces the icon, counts update and Escape closes it.
- [Settings Accordion](https://nuancier.dev/c/settings-accordion): Settings grouped in an accordion: each header summarizes live the values chosen inside (switches, select, slider), a dot flags changed sections and a Reset button restores defaults; one panel open at a time.
- [Avatar Builder](https://nuancier.dev/c/avatar-builder): An SVG avatar builder: pick skin tone, hair style and color, eyes, mouth and background from swatches; the face updates with a small bounce, Randomize shuffles everything and the preview comes in three sizes.
- [Code Diff](https://nuancier.dev/c/code-diff): A code diff like in a review: unified or side-by-side view, line numbers for both versions, added and removed lines coloured with their sign, unchanged lines folded behind Show 4 unchanged lines, a button to copy the new version and a +4 −2 summary; falls back to the unified view on small screens.

### Forms (50)

- [Peek Rating](https://nuancier.dev/c/peek-rating): Stars that lift on hover, with a label bubble.
- [Squish Switch](https://nuancier.dev/c/squish-switch): A switch whose knob squishes as it slides.
- [Hold Button](https://nuancier.dev/c/hold-button): For dangerous actions: hold to confirm, with a mouse, a finger or Space / Enter. Letting go too early rewinds the fill; the result is announced to screen readers.
- [Stepper](https://nuancier.dev/c/stepper): A step-by-step flow with a progress bar that advances.
- [Floating Label](https://nuancier.dev/c/float-label): The label floats above the field as soon as you type.
- [OTP Input](https://nuancier.dev/c/otp): Six boxes for a verification code: typing, pasting the whole code, backspace and arrow keys handled. A complete code submits itself: spinner, then success, or a shake and an error if the code is wrong (the demo code is 424242). Resending is locked behind a countdown.
- [Password Strength](https://nuancier.dev/c/password-strength): A password field with a four-segment meter and a verdict (weak, fair, good, strong), rules that tick live, an eye to reveal the password and a button that generates a strong password and copies it.
- [Segmented Control](https://nuancier.dev/c/segmented): A multi-option selector with a sliding pill: a proper radio group (arrow keys, Home, End), and the pill re-aligns when the size changes.
- [Range Bubble](https://nuancier.dev/c/range-bubble): A slider with a value bubble that follows the handle.
- [Tag Input](https://nuancier.dev/c/tag-input): Enter or comma creates a tag, Backspace removes the last one. Duplicates are refused with a small shake, each × is named (“Remove design”) and changes are announced to screen readers.
- [Swatch Picker](https://nuancier.dev/c/color-picker): Color swatches with a preview and hex code: a named radio group (arrow keys), preview text that switches between black and white for contrast, and a button to copy the code.
- [Checkbox Cards](https://nuancier.dev/c/toggle-group): Checkboxes as selectable cards.
- [Search Suggest](https://nuancier.dev/c/search-suggest): A search field with suggestions and the typed part in bold: an accessible combobox (arrow keys, Enter, Escape), result count announced, closes when you click away.
- [Elastic Slider](https://nuancier.dev/c/elastic-slider): A slider that stretches like a rubber band when you pull past its edges. Works with the keyboard (arrows, Page Up / Down, Home, End) and also bounces when you hit an end.
- [Comet Dial](https://nuancier.dev/c/comet-dial): A circular dial you turn with your finger, a comet trail follows the speed. Arrow keys supported.
- [Option Wheel](https://nuancier.dev/c/option-wheel): A phone-style wheel picker: wheel, drag or arrows, the centered option stands out.
- [Curved Input](https://nuancier.dev/c/curved-input): A field whose text is written on a curve that straightens as the sentence grows.
- [Marching Ants Border](https://nuancier.dev/c/marching-ants): Dashes march around a drop zone; they speed up and light up on hover or when a file is dragged over.
- [Sign-in Form](https://nuancier.dev/c/sign-in-form): A complete sign-in form: email and password checked at the right moment, a show-password toggle, a button that loads then confirms.
- [Newsletter Form](https://nuancier.dev/c/newsletter-form): An email field and its button on one line; a valid address slides the form to a confirmation message.
- [Contact Form](https://nuancier.dev/c/contact-form): Name, email, topic chips and a message with a character counter; sending checks every field, then shows a thank-you.
- [Dual Range Slider](https://nuancier.dev/c/dual-range): A two-handle price slider (min and max) whose handles cannot cross, with the coloured range and live values.
- [Sign-up Form](https://nuancier.dev/c/sign-up-form): A sign-up form whose password rules tick live, with a strength meter and a button that enables only when everything is valid.
- [Avatar Upload](https://nuancier.dev/c/avatar-upload): A clickable round avatar: picking an image shows it right away as a cropped preview, with Change and Remove buttons.
- [Upload Queue](https://nuancier.dev/c/upload-queue): An upload queue: each chosen file appears with its icon, size and progress bar, then a check; it can be cancelled.
- [Avatar Picker](https://nuancier.dev/c/avatar-picker): Pick an avatar among generated gradients: the chosen one gets a ring and shows large with the initials.
- [Provider Sign-in](https://nuancier.dev/c/social-sign-in): Provider sign-in buttons (Google, GitHub, Apple, email): the chosen one shows a spinner, the others are disabled.
- [Settings Switches](https://nuancier.dev/c/switch-list): A settings list with real switches (role="switch") in three sizes, one disabled, and a state label that follows.
- [Animated Checkboxes](https://nuancier.dev/c/check-draw): A task list whose checkboxes draw their check mark in one stroke; the text gets struck through and a progress counter follows.
- [Checkout Steps](https://nuancier.dev/c/checkout-accordion): A three-step checkout accordion: each section validates before opening the next, collapses to a summary with "Edit", and the last one confirms the order.
- [Paste or Drop Image](https://nuancier.dev/c/paste-upload): An image upload zone that accepts click, drag and drop and paste (Ctrl + V); the preview shows size and dimensions, with a remove button and a sample image.
- [Attachment Composer](https://nuancier.dev/c/attach-chips): A chat-style message field: attachments become chips (colored type, size, progress ring then check) you remove in one click, and sending clears everything.
- [Passkey Sign-in](https://nuancier.dev/c/passkey-sign-in): Passkey sign-in: a fingerprint that draws itself with a scan line, a "Touch the sensor" message, an animated success; Escape cancels and a link switches to password.
- [Sign In / Sign Up Tabs](https://nuancier.dev/c/auth-tabs): A two-tab sign in / sign up card: sliding indicator, smoothly adapting height, an eye to reveal the password, a strength meter and inline validation.
- [Folder Upload Tree](https://nuancier.dev/c/folder-upload): A whole-folder upload: drag and drop or pick a folder, a collapsible tree with sizes and per-type icons, the total on top, then a simulated upload with a bar per folder; a button loads a sample folder.
- [Ring Progress Upload](https://nuancier.dev/c/ring-upload): A circular upload target: drop or pick files, the dashed ring becomes an overall progress gauge with the count in the middle, each file gets a status chip, then a check mark draws itself; uploads can be cancelled.
- [Mention Popover](https://nuancier.dev/c/mention-picker): A comment box where "@" opens a suggestion popover right under the text caret: filter as you type, arrows, Enter or Tab to insert, Escape to close, and the list of notified people below.
- [Magic Link Sign-in](https://nuancier.dev/c/magic-link-sign-in): Magic link sign-in: an email field validated live, a loading button, then a "Check your inbox" screen with an animated envelope, masked address, a resend button locked by a countdown and a way back to change the address.
- [Plan Add-ons Builder](https://nuancier.dev/c/pricing-addons): A base plan plus checkable add-ons (storage, seats, support) with their own quantity steppers; the summary lists the chosen lines and the total glides to its new value.
- [Cloud Sync Upload](https://nuancier.dev/c/cloud-upload): A drop zone under a cloud: dropped or chosen files fly up as dots, each row shows progress and speed, one file in four fails to demo the error state with Retry, and the cloud pulses while syncing.
- [Phone OTP Sign In](https://nuancier.dev/c/phone-otp-sign-in): A two-step phone sign-in: country code and number formatted while typing, then six code boxes that accept paste, move by themselves, shake on a wrong code (the right one is 123456) and show an animated check.
- [Crop Upload](https://nuancier.dev/c/crop-upload): A profile photo upload with cropping: drop or choose an image (or use the sample), drag it inside the round frame and zoom with the slider or wheel; arrow keys nudge the crop and the live preview comes in three sizes.
- [CSV Import Mapper](https://nuancier.dev/c/csv-import): A three-step CSV import: drop a file (or load the sample), detected columns are auto-mapped to expected fields through selects, the table preview flags invalid cells and the Import button counts valid rows.
- [Mood Slider](https://nuancier.dev/c/mood-slider): A satisfaction slider whose thumb is a face: the mouth goes from frown to big smile, brows move, the track tints from red to green and the label changes (Terrible to Amazing); drag, click the track or use arrow keys.
- [Equalizer Sliders](https://nuancier.dev/c/eq-sliders): A six-band equalizer of vertical sliders: each band is set with mouse, touch or arrow keys, a smooth curve links the knobs live and presets (Flat, Bass, Vocal, Bright) glide every band at once.
- [Photo Split Sign In](https://nuancier.dev/c/photo-sign-in): A two-panel sign-in screen: a real photo on the left with a rotating quote, and on the right email, password with Show button, Remember me, live validation and a button that loads then confirms; demo password: demo1234.
- [Date Picker Popover](https://nuancier.dev/c/date-popover): A date field that opens an anchored calendar popover: month navigation with a slide, today outlined, past days dimmed, shortcuts (Today, Tomorrow, In a week) and full keyboard grid navigation; Escape or an outside click closes it.
- [Inline Edit Fields](https://nuancier.dev/c/inline-edit): Profile settings edited in place: Edit turns the value into a field, Enter saves, Escape cancels and returns focus; email and website are validated with an error message tied to the field, saving shows a short spinner then Saved; one field edits at a time.
- [Availability Grid](https://nuancier.dev/c/availability-grid): A weekly grid to share your free time: paint slots by dragging (mouse or finger), erase them by starting from a taken slot; with the keyboard, arrows move through the grid and Space toggles a slot; a readable summary (Mon 9–12, Wed 14–17) and the total hours update live.
- [Invite Team Members](https://nuancier.dev/c/invite-members): Invite your team in one go: paste or type several emails (comma, space or Enter make a chip), invalid addresses and duplicates are flagged, Backspace removes the last one, one role for the whole batch, a seat counter follows (3 of 10 seats), then sending shows a spinner and the list of invites sent.

### Backgrounds (138)

- [Dot Grid](https://nuancier.dev/c/dot-grid): A grid of dots that parts around the cursor.
- [Aurora](https://nuancier.dev/c/aurora): Veils of color drifting slowly, in pure CSS.
- [Starfield](https://nuancier.dev/c/starfield): Twinkling stars and shooting stars on a lightweight canvas.
- [Grain](https://nuancier.dev/c/grain): Animated film grain to lay over any background.
- [Mesh Blobs](https://nuancier.dev/c/mesh-blobs): Blurry blobs of color drifting slowly.
- [Grid Spotlight](https://nuancier.dev/c/grid-spotlight): A subtle grid that lights up around the cursor.
- [Waves](https://nuancier.dev/c/waves): Layered waves drawn on canvas, in a gentle loop.
- [Particle Network](https://nuancier.dev/c/particles-links): Dots linked when they are close, attracted by the mouse.
- [Conic Glow](https://nuancier.dev/c/conic-spin): A conic gradient spinning slowly behind blurred content.
- [Code Rain](https://nuancier.dev/c/matrix-rain): Terminal-style rain of characters, drawn on canvas.
- [Moving Squares](https://nuancier.dev/c/squares-bg): A grid scrolling diagonally, the hovered cell lights up.
- [Threads](https://nuancier.dev/c/threads-bg): Dozens of thin threads waving together and reacting to the mouse.
- [Light Beams](https://nuancier.dev/c/beams-bg): Vertical light beams that rise and fade.
- [Lightning](https://nuancier.dev/c/lightning-bg): Random branching lightning bolts, with a sky flash.
- [Plasma](https://nuancier.dev/c/plasma-bg): A plasma of colors computed pixel by pixel, smoothed low resolution.
- [Ripple Grid](https://nuancier.dev/c/ripple-grid): A grid of dots rippling out from where you click.
- [Letter Glitch](https://nuancier.dev/c/letter-glitch): A wall of colored letters changing at random, vignetted at the edges.
- [Radar](https://nuancier.dev/c/radar-bg): A radar sweep that reveals targets as it passes.
- [Hyperspeed](https://nuancier.dev/c/hyperspeed-bg): Jump to light speed: stars stretch into streaks, faster on click.
- [Orb](https://nuancier.dev/c/orb-bg): A glowing sphere that breathes and bends toward the cursor.
- [Pixel Snow](https://nuancier.dev/c/pixel-snow): Chunky pixel snow falling at an angle, wind driven by the mouse.
- [Dot Field](https://nuancier.dev/c/dot-field): A field of dots pushed away by the mouse, then settling back.
- [Swirl](https://nuancier.dev/c/balatro-swirl): A psychedelic swirl of colors, low resolution retro style.
- [Glass Shards](https://nuancier.dev/c/glass-shards): A stream of glass shards in perspective, white edges and grain; the mouse parts them, a long press pulls them in.
- [Micro Slats](https://nuancier.dev/c/micro-slats): Hundreds of thin slats lighting up to a slow noise, swept by a sheen.
- [Shape Waves](https://nuancier.dev/c/shape-waves): Concentric waves that morph from square to circle as they travel outward.
- [Ghost Fibers](https://nuancier.dev/c/ghost-fibers): Translucent glowing fibers waving slowly like ghostly filaments.
- [CRT Warp](https://nuancier.dev/c/crt-warp): A curved CRT screen: color bands, scanlines and chromatic aberration.
- [Molten Metal](https://nuancier.dev/c/molten-metal): Molten metal: a lit liquid relief whose light follows the mouse.
- [Gradient Waves](https://nuancier.dev/c/gradient-waves): Soft rolling gradient waves fading into haze.
- [Web Threads](https://nuancier.dev/c/web-threads): A glowing spider web: spokes and rings that quiver, center drawn to the mouse.
- [Topography](https://nuancier.dev/c/topography): Contour lines sliding slowly, like a living topographic map.
- [Light Tunnel](https://nuancier.dev/c/light-tunnel): Fly through a tunnel of light rings; the mouse moves the vanishing point.
- [Sliced Waves](https://nuancier.dev/c/sliced-waves): A wave of color cut into horizontal slices that each glide at their own pace.
- [Acid Squares](https://nuancier.dev/c/acid-squares): A grid of acid squares spinning and pulsing, stronger near the mouse.
- [Scanner](https://nuancier.dev/c/scanner): A scan line sweeps up and down a grid and lights up what it touches.
- [Ferrofluid](https://nuancier.dev/c/ferrofluid): A glossy black magnetic liquid that spikes up following the mouse.
- [Lightfall](https://nuancier.dev/c/lightfall): A rain of light streaks falling at different speeds.
- [Liquid Ether](https://nuancier.dev/c/liquid-ether): Fluid swirls of color the mouse stirs like a liquid.
- [Prism](https://nuancier.dev/c/prism): A spinning prism: a white beam goes in, a rainbow fan comes out.
- [Dark Veil](https://nuancier.dev/c/dark-veil): A dark veil rippling in depth, with scanlines and grain.
- [Light Pillar](https://nuancier.dev/c/light-pillar): A living column of light waving in the center, following the mouse.
- [Silk](https://nuancier.dev/c/silk): Draped silk rippling, with a satin sheen gliding over the folds.
- [Floating Lines](https://nuancier.dev/c/floating-lines): Glowing lines that float and bend toward the mouse.
- [Side Rays](https://nuancier.dev/c/side-rays): Light rays entering from the side and shimmering softly.
- [Light Rays](https://nuancier.dev/c/light-rays): Light rays falling from above; their source follows the mouse.
- [Pixel Blast](https://nuancier.dev/c/pixel-blast): Chunky pixels lighting up in successive shockwaves, and around the mouse.
- [Color Bends](https://nuancier.dev/c/color-bends): Bold ribbons of color slowly twisting.
- [Evil Eye](https://nuancier.dev/c/evil-eye): A glowing eye whose pupil follows the mouse.
- [Line Waves](https://nuancier.dev/c/line-waves): Horizontal lines lifted by waves, higher in the middle.
- [Soft Aurora](https://nuancier.dev/c/soft-aurora): Northern-light curtains rippling in a starry sky.
- [Plasma Wave](https://nuancier.dev/c/plasma-wave): Plasma ribbons waving horizontally and crackling.
- [Gradient Blinds](https://nuancier.dev/c/gradient-blinds): Gradient venetian blinds that tilt, with a spotlight under the mouse.
- [Grainient](https://nuancier.dev/c/grainient): A living color gradient covered in film grain.
- [Grid Scan](https://nuancier.dev/c/grid-scan): A retro grid floor scrolling to the horizon, crossed by a wave of light.
- [Prismatic Burst](https://nuancier.dev/c/prismatic-burst): A burst of iridescent rays spinning around a glowing core.
- [Galaxy](https://nuancier.dev/c/galaxy): A spiral galaxy turning slowly in a parallax star field.
- [Dither](https://nuancier.dev/c/dither): A moving pattern rendered with two-color ordered dithering, retro-screen style.
- [Faulty Terminal](https://nuancier.dev/c/faulty-terminal): A crackling green terminal screen: changing characters, jumping lines.
- [Iridescence](https://nuancier.dev/c/iridescence): Soap-bubble iridescent reflections that shift as the mouse passes.
- [Grid Distortion](https://nuancier.dev/c/grid-distortion): A gridded image that bulges like a magnifier under the mouse.
- [Liquid Chrome](https://nuancier.dev/c/liquid-chrome): Liquid chrome with sharp reflections, warped by the mouse.
- [Ballpit](https://nuancier.dev/c/ballpit): A ball pit: balls fall and collide, the mouse pushes them and a click makes them jump.
- [Grid Motion](https://nuancier.dev/c/grid-motion): Rows of tilted tiles sliding in opposite directions with the mouse position.
- [Meteors](https://nuancier.dev/c/mu-meteors): A shower of thin meteors crossing the frame diagonally, each with its tail.
- [Ripple](https://nuancier.dev/c/mu-ripple): Concentric circles breathing one after another, fading toward the bottom.
- [Grid Pattern](https://nuancier.dev/c/mu-grid-pattern): A thin grid with a few filled cells, skewed and faded out in a circle toward the edges.
- [Dot Pattern](https://nuancier.dev/c/mu-dot-pattern): A regular dot pattern; in glow mode each dot pulses and grows at its own pace.
- [Striped Pattern](https://nuancier.dev/c/mu-striped-pattern): Fine diagonal hatching, faded in a circle, to texture a background without weighing it down.
- [Interactive Grid Pattern](https://nuancier.dev/c/mu-interactive-grid-pattern): A grid whose hovered cell lights up instantly and fades slowly once left.
- [Animated Grid Pattern](https://nuancier.dev/c/mu-animated-grid-pattern): A grid where cells light up and fade one by one, then reappear elsewhere.
- [Flickering Grid](https://nuancier.dev/c/mu-flickering-grid): A grid of tiny squares flickering at random, like a breathing screen.
- [Light Rays](https://nuancier.dev/c/mu-light-rays): Bluish light rays fall from above, sway gently and light up in turn.
- [Warp Background](https://nuancier.dev/c/mu-warp-background): A card at the center of a perspective grid tunnel, where colored beams rush forward.
- [Retro Grid](https://nuancier.dev/c/mu-retro-grid): A retro perspective grid floor scrolling endlessly toward the horizon, under a gradient title.
- [Particles](https://nuancier.dev/c/mu-particles): Glowing dust drifting slowly and gliding toward the mouse, each particle with its own magnet.
- [Glyph Matrix](https://nuancier.dev/c/mu-glyph-matrix): A grid of tiny pale characters mutating here and there, fading toward the bottom.
- [Noise Texture](https://nuancier.dev/c/mu-noise-texture): Fine grain generated by an SVG filter, to lay over a background for texture.
- [Hexagon Pattern](https://nuancier.dev/c/mu-hexagon-pattern): A thin hexagon tiling with a few filled cells, faded in a circle toward the edges.
- [Net](https://nuancier.dev/c/vanta-net): A network of dots linked by lines floating in 3D and reacting to the mouse.
- [Dots](https://nuancier.dev/c/vanta-dots): A sheet of dots in perspective, linked by threads, gently undulating.
- [Waves](https://nuancier.dev/c/vanta-waves): A glossy 3D water surface rippling, lit by the mouse.
- [Fog](https://nuancier.dev/c/vanta-fog): Colored fog drifting slowly in soft swirls.
- [Clouds](https://nuancier.dev/c/vanta-clouds): A sky of volumetric clouds at sunset, scrolling by.
- [Birds](https://nuancier.dev/c/vanta-birds): A flock of birds flying together and avoiding the mouse.
- [Cells](https://nuancier.dev/c/vanta-cells): Colored cells morphing and melting into each other continuously.
- [Globe](https://nuancier.dev/c/vanta-globe): A globe made of dots and glowing arcs, spinning on itself.
- [Halo](https://nuancier.dev/c/vanta-halo): A blurred glowing ring rippling and bending toward the mouse.
- [Rings](https://nuancier.dev/c/vanta-rings): Segmented concentric rings rotating in layers.
- [Trunk](https://nuancier.dev/c/vanta-trunk): Hundreds of threads coiling into an organic trunk, like fibers.
- [Topology](https://nuancier.dev/c/vanta-topology): A field of fine fibers flowing like living contour lines.
- [Particle Network](https://nuancier.dev/c/pjs-network): The classic constellation: drifting dots linking to their neighbors, grabbed by the mouse.
- [Night Sky](https://nuancier.dev/c/pjs-nasa): A twinkling starry sky; stars swell under the mouse and scatter on click.
- [Snowfall](https://nuancier.dev/c/pjs-snow): Snowflakes of all sizes falling gently; the mouse chases them away.
- [Polygon Bubbles](https://nuancier.dev/c/pjs-bubbles): Large translucent hexagons floating and breathing slowly.
- [Linked Particles](https://nuancier.dev/c/tsp-links): Linked particles drawn toward the mouse, multiplying on click.
- [Twinkling Stars](https://nuancier.dev/c/tsp-stars): A deep sky with stars twinkling each at their own pace.
- [Hyperspace](https://nuancier.dev/c/tsp-hyperspace): Stars burst from the center and stretch into streaks: the jump to light speed.
- [Soft Snow](https://nuancier.dev/c/tsp-snow): Slow snow swaying slightly as it falls.
- [Fireworks](https://nuancier.dev/c/tsp-fireworks): Rockets rising and bursting into colorful sprays, in a loop.
- [Confetti Rain](https://nuancier.dev/c/tsp-confetti): A continuous rain of colorful confetti spinning as it falls.
- [Triangles Mesh](https://nuancier.dev/c/tsp-triangles): Linked dots forming a moving mesh of translucent triangles.
- [Rising Bubbles](https://nuancier.dev/c/tsp-bubbles): Colored bubbles rising and swaying, popping on click.
- [Fireflies](https://nuancier.dev/c/tsp-fireflies): Fireflies drifting at random, blinking softly.
- [Mouse Connect](https://nuancier.dev/c/tsp-connect): A cloud of dots that only link up around the mouse, like a web lighting up.
- [Paper Dot Grid](https://nuancier.dev/c/paper-dot-grid): A perfectly regular grid of dots, crisp at any size: the “graph paper” background of interfaces.
- [Dot Orbit](https://nuancier.dev/c/paper-dot-orbit): Fiery dots spinning on tiny orbits, like moving embers.
- [Neuro Noise](https://nuancier.dev/c/paper-neuro-noise): A network of glowing filaments weaving and untangling, like neurons.
- [Mesh Gradient](https://nuancier.dev/c/paper-mesh-gradient): A four-color mesh gradient blending and swirling slowly.
- [Smoke Ring](https://nuancier.dev/c/paper-smoke-ring): A ring of white smoke rippling and tearing at the edge.
- [Simplex Noise](https://nuancier.dev/c/paper-simplex-noise): Flat areas of bold color morphing like a living heat map.
- [Metaballs](https://nuancier.dev/c/paper-metaballs): Colored blobs merging and splitting like in a lava lamp.
- [Line Waves](https://nuancier.dev/c/paper-waves): Regular crisp wavy lines covering the background.
- [Voronoi Cells](https://nuancier.dev/c/paper-voronoi): Stained-glass cells separated by thin dark lines, drifting slowly.
- [Warp](https://nuancier.dev/c/paper-warp): A checkerboard twisting and swirling like liquid fabric.
- [God Rays](https://nuancier.dev/c/paper-god-rays): Colored light rays radiating from a point below the frame, flickering.
- [Spiral](https://nuancier.dev/c/paper-spiral): A spiral of fine strokes turning forever, hypnotic.
- [Swirl](https://nuancier.dev/c/paper-swirl): Color bands coiling around the center in a whirl.
- [Grain Gradient](https://nuancier.dev/c/paper-grain-gradient): A grainy gradient in bright colors drifting from the corners.
- [Pulsing Border](https://nuancier.dev/c/paper-pulsing-border): A frame of colored light pulsing and smoking along the edges.
- [Color Panels](https://nuancier.dev/c/paper-color-panels): Translucent colored panels spinning like a fan and overlapping.
- [Dithering](https://nuancier.dev/c/paper-dithering): A sphere rendered in two-color pixel dithering, slowly turning.
- [Falling Stars](https://nuancier.dev/c/ins-falling-stars): Stars rushing toward you from the center, leaving a blurred trail: traveling through space.
- [Snowfall Canvas](https://nuancier.dev/c/ins-snowfall): Light snowflakes falling and drifting a little, each with its own size and opacity.
- [Silk Fabric](https://nuancier.dev/c/ins-silk): Deep-sheen silk fabric with a fine weave texture, rippling and dipping under the mouse.
- [Big Circles](https://nuancier.dev/c/tsp-big-circles): Large soft pastel circles drifting slowly and overlapping.
- [Fountain](https://nuancier.dev/c/tsp-fountain): A continuous jet of colored particles spurting from the bottom and falling back in a spray.
- [Gravity Balls](https://nuancier.dev/c/tsp-gravity): Balls falling, bouncing and colliding at the bottom of the frame; a click adds more.
- [Black Hole](https://nuancier.dev/c/tsp-absorber): A black hole in the center swallowing the colored particles that come within reach.
- [Background Boxes](https://nuancier.dev/c/bg-boxes): A grid of cells in isometric perspective; each hovered cell lights up in a palette colour, then fades.
- [Dotted Glow](https://nuancier.dev/c/dotted-glow): A canvas dot grid; drifting glows brighten the dots they cross and tint them with the brand colour.
- [Lamp Header](https://nuancier.dev/c/lamp-header): A glowing lamp line above the headline that fans open when the section scrolls into view.
- [Noise Blobs](https://nuancier.dev/c/noise-blobs): Blurred gradient blobs drifting slowly under a static film-grain overlay.
- [Shooting Stars](https://nuancier.dev/c/shooting-stars): A twinkling star field crossed at random by tinted shooting stars.
- [Vortex](https://nuancier.dev/c/vortex-bg): Coloured particles spiralling into the centre, leaving long soft trails.
- [Wavy Ribbons](https://nuancier.dev/c/wavy-ribbons): Translucent, blurred ribbons of colour flowing sideways behind the content.
- [Ripple Rings](https://nuancier.dev/c/ripple-rings): Concentric rings pulsing outward, a calm "listening" backdrop.
- [Spotlight Hero](https://nuancier.dev/c/spotlight-hero): A hero on a fine grid; a glow follows the mouse and reveals the grid underneath.

### Layout (35)

- [Logo Marquee](https://nuancier.dev/c/logo-marquee): An endless scroll that slows on hover, faded at the edges.
- [Bento Grid](https://nuancier.dev/c/bento): A grid of tiles in varied sizes, with a glow on hover.
- [Testimonial Wall](https://nuancier.dev/c/testimonial-wall): Two columns of reviews scrolling in opposite directions, paused on hover.
- [Split Hero](https://nuancier.dev/c/split-hero): A two-column header: text on the left, stacked mockup on the right.
- [Scroll Stack](https://nuancier.dev/c/scroll-stack): Cards that stack and shrink at the top as you scroll.
- [Masonry](https://nuancier.dev/c/masonry): A masonry grid that cascades in and slides into a new layout when shuffled.
- [Magic Bento](https://nuancier.dev/c/magic-bento): A living bento grid: mouse spotlight, glowing edges, tilt and particles.
- [Marquee](https://nuancier.dev/c/mu-marquee): Two rows of reviews scrolling in opposite directions, paused on hover, faded edges.
- [Progressive Blur](https://nuancier.dev/c/mu-progressive-blur): A blur that intensifies in steps toward the bottom of a scrolling area, to fade the content.
- [Bento Grid](https://nuancier.dev/c/mu-bento-grid): A bento grid of feature cards: on hover, the content lifts and an action link appears.
- [Infinite Slider](https://nuancier.dev/c/mp-infinite-slider): A row of logos scrolling endlessly and slowing down smoothly on hover.
- [Fade Scroll Area](https://nuancier.dev/c/fade-scroll-area): A list that scrolls inside its box, with a thin scrollbar and top and bottom fades that only show when there is more content on that side.
- [Overlay Scrollbar](https://nuancier.dev/c/overlay-scrollbar): The native scrollbar is replaced by a thin overlay one: it shows on scroll or hover, can be dragged, and a click on the track jumps there.
- [Horizontal Scroll Area](https://nuancier.dev/c/snap-scroll-row): A row of cards that scrolls horizontally and snaps to each card, with arrows disabled at the ends and a progress bar.
- [Scroll Timeline](https://nuancier.dev/c/scroll-timeline): A vertical timeline whose line fills as you scroll; each step lights up when the line reaches it.
- [Plan Comparison Table](https://nuancier.dev/c/pricing-compare): A plan comparison table: sticky header, checks and dashes, grouped rows and a highlighted recommended column.
- [Changelog](https://nuancier.dev/c/changelog-list): A changelog: version and date on the left, notes tagged New / Improved / Fixed, and a type filter on top.
- [Rolling Word Hero](https://nuancier.dev/c/hero-rolling): A hero block: faded background grid, announcement badge, a headline whose last word rolls vertically (width follows), and an email signup that confirms in place.
- [Orbit Hero](https://nuancier.dev/c/hero-orbit): An "integrations" hero: a logo in the middle, two rings spinning in opposite directions with badges that stay upright, a headline and two buttons; pauses on hover.
- [Scroll-Filled Timeline](https://nuancier.dev/c/alternating-timeline): An alternating left / right timeline in a scroll area: the center line fills as you scroll and each step slides in; one column when space runs out.
- [Vertical Review Marquee](https://nuancier.dev/c/vertical-marquee): Three columns of reviews scrolling vertically in opposite directions at different speeds, faded top and bottom, paused on hover or focus, with a pause button for those who need it.
- [Crossed Ribbons](https://nuancier.dev/c/crossed-ribbons): Two tilted ribbons crossing each other and scrolling in opposite directions, one solid violet, one outlined; hovering slows the ribbon under the pointer and a button pauses everything.
- [Numbered Accordion](https://nuancier.dev/c/numbered-accordion): A numbered FAQ from 01 to 05: the open question's number turns violet, the answer unfolds smoothly, only one stays open, and arrows, Home and End move between questions.
- [Horizontal Feature Accordion](https://nuancier.dev/c/horizontal-accordion): Four side-by-side panels: the active one widens to reveal title, text and a figure, the others keep only an icon and a vertical title; hover, click or arrow keys, stacking vertically when space runs out.
- [Autoplay Feature Tabs](https://nuancier.dev/c/feature-tabs): A features block: a list of tabs on the left whose active one expands with a progress bar, a CSS-drawn interface preview on the right that cross-fades; autoplay, paused on hover or focus.
- [Terminal Hero](https://nuancier.dev/c/hero-terminal): A developer tool hero: version badge, gradient headline, two buttons and a terminal that types the install command then prints its output lines; copy and replay buttons.
- [Public Roadmap](https://nuancier.dev/c/roadmap): A public roadmap in scrolling quarterly columns: each card carries a colored status (shipped, in progress, planned), chips filter by status and a vote button increments its counter.
- [Gradient Typing Hero](https://nuancier.dev/c/hero-gradient-type): A hero whose last word types and erases in a loop inside a flowing gradient, over blurred color blobs that slowly follow the pointer; two CTAs, social proof and pause on title hover.
- [Tag Cloud Marquee](https://nuancier.dev/c/tag-marquee): Three rows of tag chips scrolling in opposite directions at different speeds with faded edges; hovering a row eases it down instead of stopping dead, and a button pauses everything for keyboard users.
- [Commit Graph Timeline](https://nuancier.dev/c/git-timeline): A Git-style commit timeline: colored branches that split and merge, commit dots, messages and authors; up / down arrows walk the history and the selected row shows its hash and changed files.
- [Photo Mosaic Hero](https://nuancier.dev/c/hero-photo-mosaic): A two-part hero: title, copy and two buttons on the left, and three columns of real photos scrolling endlessly in alternating directions on the right, faded top and bottom; hover slows the columns and a button pauses the motion.
- [Prompt Hero](https://nuancier.dev/c/hero-prompt): An AI tool hero: a big input whose example text types and erases itself, suggestion chips that fill it, and on submit a result card that appears line by line with a blinking caret; Enter to run.
- [Stock Ticker Tape](https://nuancier.dev/c/ticker-tape): An endless stock ticker: each symbol shows its price, a green or red change and a tiny arrow; quotes move every second with a color flash, hovering stops the tape and a button pauses it.
- [Kanban Board](https://nuancier.dev/c/kanban-board): A sprint kanban board: drag cards between columns with the mouse, or with the keyboard (Space to pick up, arrows to move, Space to drop, Escape to cancel); counters follow, In progress flags when it goes over its limit of 3, and every move is announced.
- [Event Calendar](https://nuancier.dev/c/event-calendar): A team month calendar: events show as coloured chips (+2 more when a day overflows, simple dots on mobile), switch months, Today jumps back; pick a day with the mouse or the keyboard (arrows, Enter) to list its events with their times.

### Feedback (42)

- [Toast Stack](https://nuancier.dev/c/toast-stack): Notifications that stack, then fan out on hover.
- [Loaders](https://nuancier.dev/c/loaders): Four loading indicators in pure CSS.
- [Progress Ring](https://nuancier.dev/c/progress-ring): A progress ring that fills up to its value.
- [Skeleton](https://nuancier.dev/c/skeleton): A loading skeleton with a sweeping shimmer.
- [Confetti](https://nuancier.dev/c/confetti): A shower of confetti drawn on canvas to celebrate a success.
- [Status Badges](https://nuancier.dev/c/status-badges): Two families of status badges: presence (online with a pulse, away, busy, offline), picked like radio buttons and mirrored on the avatar dot; and service health (operational, degraded, outage, maintenance) with icons, readable without color.
- [Empty State](https://nuancier.dev/c/empty-state): An empty screen that explains and offers the next action.
- [Inline Alerts](https://nuancier.dev/c/inline-alert): Rich in-page alerts with a title, an explanation and actions. The failed deploy unfolds its log and “Retry” turns into a spinner, then into a success; the trial reminder is postponed with “Remind me later”.
- [Step Progress](https://nuancier.dev/c/upload-progress): A step bar that advances, with a check on finished steps.
- [Animated Circular Progress Bar](https://nuancier.dev/c/mu-circular-progress): A circular gauge in two arcs separated by a gap, gliding to each new value.
- [Animated List](https://nuancier.dev/c/mu-animated-list): Notifications arriving one by one at the top of the list with a small bounce, pushing the others.
- [Banner Alerts](https://nuancier.dev/c/banner-alerts): Four alert banners (info, success, warning, error) with icon, action and a close button that folds them away.
- [Empty Inbox](https://nuancier.dev/c/empty-inbox): A polished empty state: floating illustration, title, helpful sentence and two actions instead of a blank page.
- [Step Progress](https://nuancier.dev/c/step-progress): A step progress bar with named steps; past steps get a check, the current one pulses, the bar fills between them.
- [Spinner Set](https://nuancier.dev/c/spinner-set): Six pure-CSS loading indicators: ring, bouncing dots, bars, orbit, pulse and indeterminate line.
- [No Results](https://nuancier.dev/c/empty-search): A helpful "no results": the query is shown back with suggestion chips that rerun the search in one click.
- [Floating 404](https://nuancier.dev/c/empty-404): A 404 page whose three digits float at their own pace and move away from the mouse, with a back button.
- [Doc Callouts](https://nuancier.dev/c/doc-callouts): Documentation callouts (Note, Tip, Important, Warning) with a coloured edge, icon and title, like in technical docs.
- [Undo Snackbar](https://nuancier.dev/c/undo-snackbar): Deleting a row shows a "Deleted · Undo" snackbar with a countdown ring; Undo puts the row back where it was.
- [Skeleton to Content](https://nuancier.dev/c/skeleton-swap): An article card as a shimmering skeleton that fades into the real content once "loaded"; a button reloads it.
- [Empty Project List](https://nuancier.dev/c/empty-folder): An empty state that leads to action: an illustrated folder with floating sheets, a "Create project" button that reveals the list; deleting the last project brings the empty state back.
- [Offline State](https://nuancier.dev/c/empty-offline): An offline state: fading wifi waves, an automatic retry with a countdown, a "Retry now" button, then back online on the third attempt.
- [Order Tracker](https://nuancier.dev/c/order-tracker): An order tracking timeline: dated steps, a pulsing current dot, a line filled up to the current step and a button that simulates the next update.
- [Countdown Banner](https://nuancier.dev/c/countdown-banner): A top-of-page offer banner with a live countdown (days, hours, minutes, seconds), a call to action and a close button that folds it away; a link brings it back.
- [Session Timeout Alert](https://nuancier.dev/c/session-timeout): A session expiry alert: a ring that empties second by second and turns amber near the end, "Stay signed in" to restart, "Sign out", and automatic sign-out at zero.
- [Dot Matrix Loader](https://nuancier.dev/c/dot-matrix-loader): A 9 × 9 dot matrix loader that cycles through four patterns (ripple, diagonal, spiral, rain); with reduced motion, patterns change without continuous animation.
- [Multi-step Loader](https://nuancier.dev/c/step-loader): A multi-step loader: the list scrolls to keep the current step centered, each step turns from spinner to check, an overall bar fills, then "Run again".
- [No Results Filters](https://nuancier.dev/c/empty-filters): A "no results" empty state that explains why: active filters become chips you remove one by one, "Clear all" brings the list back, and the filter bar above toggles them again from the keyboard.
- [First Project Empty State](https://nuancier.dev/c/empty-onboard): An empty dashboard: breathing dashed ghost cards, a "Create project" button that unfolds a field in place, then the first card pops in and replaces the empty state; a link resets the demo.
- [Storage Quota Alert](https://nuancier.dev/c/quota-alert): A storage quota alert whose tone follows usage (info, warning, critical): a bar stacked by file type, a matching message, "Free up space" to lower the gauge, "Add files" to raise it, and a close button.
- [Promise Toasts](https://nuancier.dev/c/promise-toast): Toasts tied to an ongoing action: they start as "loading" with a spinner, then turn into success or failure with a Retry button; stacked in a fan, spread on hover, auto-dismiss paused on hover.
- [Morphing Shape Loader](https://nuancier.dev/c/morph-loader): A loader with a shape that keeps morphing (square, circle, drop, diamond) while changing color, a breathing shadow underneath, a cycling step message and elapsed time; a still shape with reduced motion.
- [Empty Cart State](https://nuancier.dev/c/empty-cart): An empty cart drawn in SVG that rocks gently, a clear message and suggestion chips: a click adds the item, the cart bounces, the badge counts and the list replaces the empty state, with a button to clear everything.
- [Empty Calendar State](https://nuancier.dev/c/empty-calendar): A week calendar with no events: empty slots breathe one after another, a message invites to plan, and clicking a slot (or Enter) drops a colored event that removes the empty state.
- [Stacked Alerts](https://nuancier.dev/c/stacked-alerts): Alerts stacked like a deck: hover or focus spreads the pile into a list, each alert (error, warning, info, success) closes with its button or a swipe right, and a counter shows how many are left.
- [Download Manager](https://nuancier.dev/c/download-manager): A download manager: each file has its bar, fluctuating speed and time left, pause / resume and cancel buttons; a global gauge sums everything and turns green when all is done.
- [Infinity Path Loader](https://nuancier.dev/c/infinity-loader): An infinity-shaped loader: a glowing stroke runs along the loop leaving a fading trail on a subtle track; three color variants, a changing status label and a static version for reduced motion.
- [Activity Feed Timeline](https://nuancier.dev/c/activity-timeline): An activity feed as a vertical timeline: each event (commit, comment, deploy, incident) has its colored icon on the line, a relative time that updates and filter chips; new events slide in at the top.
- [Form Error Summary](https://nuancier.dev/c/error-summary): An error summary alert at the top of a form: on submit it lists every error as a link that jumps to the field; each fix strikes its line live, the counter drops, and when all is fine the alert turns green.
- [Grid Wave Loader](https://nuancier.dev/c/grid-wave-loader): A 4 x 4 grid loader crossed by a wave: three patterns (diagonal, spiral, radar), each cell lights up, grows and shifts hue as the wave passes; a status label rotates below and a static version honors reduced motion.
- [All Caught Up](https://nuancier.dev/c/empty-caught-up): An "all caught up" notifications empty state: a sleeping bell sways with floating z letters, a reassuring message and a digest setting; a button simulates new notifications, the bell wakes up ringing and the list replaces the empty state.
- [Toast Position Playground](https://nuancier.dev/c/toast-positions): A toast playground: a mini window with six positions to choose from, four toast types sliding in from the matching edge, stacking, dismissed by click or swipe, and a lifetime bar that pauses on hover.

### Navigation (40)

- [Sliding Tabs](https://nuancier.dev/c/sliding-tabs): Tabs underlined by a sliding line, with a pill that follows hover or focus. Real accessible tabs (arrow keys, Home, End); the line re-aligns when the size changes.
- [Command Palette](https://nuancier.dev/c/command-palette): A command palette filtered from the keyboard (arrows, Enter).
- [Breadcrumb](https://nuancier.dev/c/breadcrumb): A breadcrumb that collapses into “…” when it gets too long.
- [Mega Menu](https://nuancier.dev/c/mega-menu): A nav bar where one tab unfolds a large multi-column panel.
- [Collapsible Sidebar](https://nuancier.dev/c/sidebar-collapse): A sidebar that collapses to icons, labels as tooltips.
- [Flowing Menu](https://nuancier.dev/c/flowing-menu): Hovering a row fills it with a scrolling band from the entry edge.
- [Pill Nav](https://nuancier.dev/c/pill-nav): A pill bar: a circle rises and fills the hovered tab.
- [Bubble Menu](https://nuancier.dev/c/bubble-menu): A round button that bursts into link bubbles.
- [Animated List](https://nuancier.dev/c/animated-list): A list that cascades in, arrow-key navigable, selection highlighted.
- [Line Sidebar](https://nuancier.dev/c/line-sidebar): A numbered list led by a line that stretches and lights up on hover and on the active item.
- [Card Nav](https://nuancier.dev/c/card-nav): A navigation bar that unfolds into three colored link cards, appearing in a cascade.
- [Staggered Menu](https://nuancier.dev/c/staggered-menu): A full-frame menu: two colored layers slide in, then big numbered links cascade in.
- [Gooey Nav](https://nuancier.dev/c/gooey-nav): A navigation whose active pill flows from link to link like a liquid, with splashes.
- [Scroll Progress](https://nuancier.dev/c/mu-scroll-progress): A thin purple, pink and peach gradient bar at the top that fills as you scroll.
- [Animated Background](https://nuancier.dev/c/mp-animated-background): A background pill glides from one option to the next, on click or hover, like a fluid selector.
- [Toolbar Dynamic](https://nuancier.dev/c/mp-toolbar-dynamic): A small toolbar that widens into a search field on click, and closes when clicking elsewhere.
- [Sticky Index List](https://nuancier.dev/c/sticky-index-list): A contact list with sticky letter headers and an index on the side: click to jump, the current letter lights up.
- [FAQ Accordion](https://nuancier.dev/c/faq-accordion): An FAQ accordion: each answer opens smoothly (animated height), plus turns to minus, one open at a time.
- [Numbered Pagination](https://nuancier.dev/c/numbered-pagination): Pagination with previous / next, the current page highlighted and ellipses that move with the page.
- [Underline Tabs](https://nuancier.dev/c/underline-tabs): Tabs whose underline slides to the chosen tab; the content fades, and arrow keys navigate.
- [Magnify Dock](https://nuancier.dev/c/mac-dock): A macOS-style dock: icons grow smoothly with the distance to the mouse, with name tooltips and a dot under open apps.
- [Details Accordion](https://nuancier.dev/c/details-accordion): An accordion on native <details> elements: several sections open at once, rotating chevron, animated opening.
- [Dots Pager](https://nuancier.dev/c/dots-pager): Pagination dots whose active one stretches into a pill and fills during autoplay; click to jump to a page.
- [Load More](https://nuancier.dev/c/load-more): A list that loads more on "Load more": the button shows a spinner, new rows cascade in and a counter follows.
- [Side Dock](https://nuancier.dev/c/side-dock): A vertical icon bar: the indicator slides to the active icon and each icon has a tooltip label on hover.
- [Floating Toolbar](https://nuancier.dev/c/floating-toolbar): A floating editor toolbar: bold, italic, underline and lists really apply to the selected text.
- [Horizontal Timeline](https://nuancier.dev/c/horizontal-timeline): A horizontal timeline of years: clicking a date slides the marker and shows the event; arrow keys move between dates.
- [File Tree](https://nuancier.dev/c/tree-accordion): A collapsible folder tree (role="tree"): up / down to move, right / left to open or close, Enter to pick; the chosen path shows above.
- [Table Pagination](https://nuancier.dev/c/pagination-jump): Full table pagination: rows per page, a "21–30 of 137" range, first / previous / next / last and a field to jump straight to a page.
- [Page Scrubber](https://nuancier.dev/c/page-scrubber): Pagination for long documents: a row of thin ticks you hover or drag, a bubble names the page and chapter, and arrow keys step page by page.
- [Radial Action Dock](https://nuancier.dev/c/radial-dock): A "+" button that fans its actions out on an arc with a slight stagger; arrow keys move between them, Escape folds everything back.
- [Notched Tab Bar](https://nuancier.dev/c/notch-tabbar): A mobile tab bar: the active icon rises into a bubble and the bar carves a notch that slides from tab to tab; left / right arrows on the keyboard.
- [Sliding Pill Pagination](https://nuancier.dev/c/sliding-pagination): A windowed numbered pagination (1 … 7 8 9 … 24) whose active pill slides from number to number; Previous / Next, arrow keys and page content that updates.
- [Expanding Label Dock](https://nuancier.dev/c/label-dock): A pill dock whose icons unfold their label on hover or focus, with separators, a violet dot under the active section and arrow keys; the screen above follows the chosen section.
- [Dock Folder Stack](https://nuancier.dev/c/dock-folder): An app dock whose Folder icon fans recent files out in a vertical arc above it, closing with Escape or an outside click; every icon grows on hover and focus.
- [Pagination Dial](https://nuancier.dev/c/pagination-dial): Dial pagination: page numbers sit on an arc that rotates to bring the chosen page to the top, driven by prev / next buttons, wheel, horizontal drag and arrow keys; the current page is announced.
- [Vertical Preview Tabs](https://nuancier.dev/c/vertical-tabs): Vertical tabs with an indicator sliding between them and a progress bar that auto-advances; the right panel changes with a staggered fade, and the keyboard (up / down, Home / End) follows the ARIA tabs pattern.
- [App Launcher Dock](https://nuancier.dev/c/dock-launcher): An app dock that behaves like a real launcher: a click bounces the icon then lights its "running" dot, a second click quits it; notification badges clear on launch and a label floats on hover and focus.
- [Alphabet Pager](https://nuancier.dev/c/alpha-pager): A-to-Z letter pagination for a directory: letters without entries are dimmed and skipped by the keyboard, a pill slides to the active letter, the list fades in and prev / next buttons jump to the nearest useful letter.
- [Browser Tabs](https://nuancier.dev/c/browser-tabs): Browser-style tabs: the active tab blends into the page with curved corners, each tab closes with its cross or a middle click, the + button adds one that widens in, and tabs reorder by drag or Ctrl + arrows.

### Cards (40)

- [Timeline](https://nuancier.dev/c/timeline): A vertical timeline whose line fills step by step.
- [Stat Card](https://nuancier.dev/c/stat-card): A metric with its change and a mini chart drawn in SVG.
- [Flip Card](https://nuancier.dev/c/flip-card): A card that flips to show its back on click.
- [Profile Card](https://nuancier.dev/c/profile-card): A profile card with banner, avatar, status and a follow button.
- [Feature Grid](https://nuancier.dev/c/feature-grid): A feature grid with icons, border lit on hover.
- [Notification List](https://nuancier.dev/c/notification-card): A notification list with unread items and “mark all as read”.
- [Glass Icons](https://nuancier.dev/c/glass-icons): Glass icons on a colored plate that tilts on hover.
- [Folder](https://nuancier.dev/c/folder): A folder that opens on click and lets its sheets peek out.
- [Bounce Cards](https://nuancier.dev/c/bounce-cards): Fanned cards that bounce in and spread apart on hover.
- [Card Swap](https://nuancier.dev/c/card-swap): A stack of cards in perspective: the front one moves to the back in a loop.
- [Chroma Grid](https://nuancier.dev/c/chroma-grid): A grayscale grid: color comes back around the cursor.
- [Reflective Card](https://nuancier.dev/c/reflective-card): A metallic card whose holographic sheen follows the tilt.
- [Decay Card](https://nuancier.dev/c/decay-card): The card image warps like liquid as the mouse passes.
- [Glass Surface](https://nuancier.dev/c/glass-surface): A draggable frosted, refracting glass panel over drifting colored shapes.
- [Shine Border](https://nuancier.dev/c/mu-shine-border): A card whose thin border is swept by a slowly rotating colored sheen.
- [Neon Gradient Card](https://nuancier.dev/c/mu-neon-gradient-card): A card with a pink to cyan neon gradient border and a large rippling blurred halo.
- [Magic Card](https://nuancier.dev/c/mu-magic-card): A card whose border and surface light up with a purple to pink gradient that follows the mouse.
- [Tilt](https://nuancier.dev/c/mp-tilt): An image card tilting in 3D toward the mouse on a soft spring, flattening back on leave.
- [Spinning Border](https://nuancier.dev/c/spin-border): A conic gradient highlight travels around the card, forever.
- [Pricing Tiers](https://nuancier.dev/c/pricing-tiers): Three plans side by side with the middle one highlighted; the monthly / yearly switch rolls the prices.
- [Testimonial Rotator](https://nuancier.dev/c/testimonial-rotator): One quote at a time that changes on its own, with an avatar stack below: click a face to show its quote.
- [Avatar Stack](https://nuancier.dev/c/avatar-stack): Overlapping avatars that spread on hover, each with its name in a tooltip, and a "+N" for the rest.
- [Presence Avatars](https://nuancier.dev/c/presence-avatar): Avatars with their presence dot (online, away, busy, offline); the online one pulses softly.
- [Feature Showcase](https://nuancier.dev/c/feature-showcase): A feature list on the left; hovering or choosing a row changes the preview on the right, with a bar that advances on its own.
- [Seat Pricing Slider](https://nuancier.dev/c/pricing-seats): A seat slider that recalculates the monthly price live, with tiered discounts and a yearly total.
- [Testimonial Grid](https://nuancier.dev/c/testimonial-grid): A wall of testimonials in columns of varied heights with stars, avatar and name; cards lift on hover.
- [Initials Avatars](https://nuancier.dev/c/initials-avatars): Initials avatars whose colour is derived from the name (always the same for a person), in five sizes, round or square.
- [Usage Pricing Calculator](https://nuancier.dev/c/pricing-usage): A usage-based pricing calculator: three sliders (requests, storage, seats) with a free allowance, a stacked bar showing where the bill comes from and an estimated total.
- [Plan Picker](https://nuancier.dev/c/pricing-plans): Three plans as radio cards (arrow keys work), a currency switcher, a violet ring around the chosen card and a final button that repeats the plan and price.
- [Testimonial Spotlight](https://nuancier.dev/c/testimonial-spotlight): A large quote and a row of avatar tabs: a ring fills around the active avatar before moving on, pauses on hover or focus, arrow keys work.
- [Social Proof Posts](https://nuancier.dev/c/social-posts): Testimonials styled as social posts in masonry columns: avatar, verified badge, handle, colored mentions and a heart that counts likes.
- [Glow Pricing Cards](https://nuancier.dev/c/pricing-glow-cards): Three plans whose borders light up under the pointer, with a glow that slides from card to card, a keyboard-friendly monthly / yearly / lifetime switch, a highlighted middle plan and prices that roll on every change.
- [Credit Packs](https://nuancier.dev/c/pricing-credits): A credit purchase card: four packs as radio buttons with proportional coin stacks, bonus credits, a computed "best value" badge, cost per credit and a balance that counts up to its new value.
- [Story Avatars](https://nuancier.dev/c/story-avatars): A row of story-style avatars ringed with a gradient: a click opens the viewer with segmented progress bars, arrows and Escape, and the ring turns grey once the story has been seen.
- [Generated Avatars](https://nuancier.dev/c/glyph-avatars): Geometric avatars generated from a name: the same name always gives the same drawing, in three styles (symmetric mosaic, rings, sunset); a field lets you try your own live.
- [Testimonial Metrics](https://nuancier.dev/c/testimonial-metrics): Customer testimonials backed by a number: company-name tabs, a big result that counts up, a quote, the author and a before / after sparkline; arrow keys move between customers.
- [Pricing Ribbon Rows](https://nuancier.dev/c/pricing-ribbon): Plans stacked as horizontal rows picked like radio buttons: the active row lights its color ribbon, unfolds its perks and updates the total below; arrow keys move between plans.
- [Currency Pricing Card](https://nuancier.dev/c/pricing-currency): A pricing card with a currency switcher (USD, EUR, GBP, JPY): the amount counts to its new value, the symbol sits where each currency expects it, and a badge shows the yearly saving when annual billing is checked.
- [Logo Tab Testimonials](https://nuancier.dev/c/testimonial-logo-tabs): A row of customer logos used as tabs: the active tab fills with a gauge that auto-advances to the next, the panel shows the quote, its author and a key figure that counts up; arrow keys, pause on hover.
- [Limited Deal Pricing](https://nuancier.dev/c/pricing-limited): A limited lifetime deal card: struck-through price, a days / hours / minutes / seconds countdown with flipping digits, a claimed-seats gauge that fills live from time to time, and a button that turns into "Join the waitlist" when sold out.

### Charts (13)

- [Bar Chart](https://nuancier.dev/c/bar-chart): Bar chart whose bars grow, value on hover.
- [Donut Chart](https://nuancier.dev/c/donut-chart): Breakdown ring with legend; the hovered slice pops out.
- [Line Chart](https://nuancier.dev/c/line-chart): Smoothed line with a marker that follows the mouse and shows the value.
- [Activity Heatmap](https://nuancier.dev/c/heatmap): Contribution-style activity grid, intensity per cell.
- [Gauge](https://nuancier.dev/c/gauge): Half-circle gauge with a needle that wobbles before settling.
- [Sparkline Table](https://nuancier.dev/c/sparkline-table): A compact table with a mini chart on each row.
- [Rating Summary](https://nuancier.dev/c/rating-summary): A review summary: big average score with partial stars, total, and the 5 to 1 star breakdown as filling bars.
- [Empty Analytics State](https://nuancier.dev/c/empty-chart): An analytics card with no data: dashed axes, a wavy ghost line, a "no data" message and a "Connect source" button; a connection bar fills, then the real line draws itself and the numbers appear.
- [KPI Sparkline Grid](https://nuancier.dev/c/kpi-sparks): Four KPIs with sparklines, colored deltas and a 7d / 30d / 90d switch: numbers count to their new value, lines redraw and hovering a sparkline shows the point value.
- [Goal Activity Rings](https://nuancier.dev/c/goal-rings): Three concentric activity rings (move, exercise, stand) that fill on load; past 100% a ring laps again in a darker tone, and +10% buttons push each goal with a glow when it is reached.
- [Contribution Heatmap](https://nuancier.dev/c/contrib-heatmap): A 26-week GitHub-style contribution map: cells color in a cascade by activity, three KPIs (total, best streak, current streak) count up, and hover or arrow keys show the day detail.
- [Data Table](https://nuancier.dev/c/data-table): A customer table ready to use: sortable columns (clickable headers with aria-sort), instant search, row selection with an indeterminate select-all, a bulk action bar that appears (Export, Archive with undo) and an empty state when nothing matches; scrolls cleanly on mobile.
- [Conversion Funnel](https://nuancier.dev/c/funnel-chart): A conversion funnel you read at a glance: each step is a proportional bar with its volume, the rate that continues to the next step and the drop-off in plain numbers; switch the period (7 / 30 days) and the bars glide to their new values; hover or focus a step for its details.

### Overlays (22)

- [Modal](https://nuancier.dev/c/modal): A window that opens with a slight zoom; Escape or an outside click closes it.
- [Drawer](https://nuancier.dev/c/drawer): A side panel that slides in from the right.
- [Tooltip](https://nuancier.dev/c/tooltip): A tooltip that appears after a short delay, on hover and keyboard focus.
- [Popover Menu](https://nuancier.dev/c/popover): A context menu anchored to the button, keyboard-navigable.
- [Cookie Consent](https://nuancier.dev/c/cookie-banner): A complete consent banner that slides up from the bottom: Reject all, Accept all or Customize, which unfolds three categories as switches (strictly necessary stays locked). The saved choice reopens from a small “Cookies” button at the bottom of the page.
- [Hero Video Dialog](https://nuancier.dev/c/mu-hero-video-dialog): A thumbnail with a big play button; on click, the video opens large in a popping dialog.
- [Confirm Dialog](https://nuancier.dev/c/confirm-dialog): A real <dialog> that zooms in over a blurred backdrop, traps focus and closes with Escape or a click outside.
- [Notification Center](https://nuancier.dev/c/notification-center): A bell with a counter; its panel lists unread notifications and "Mark all as read" clears the counter.
- [Share Popover](https://nuancier.dev/c/share-popover): A Share button opening an anchored popover with the link to copy ("Copied" feedback) and share shortcuts.
- [Hover Card](https://nuancier.dev/c/hover-card): Hovering or focusing an @name opens, after a short delay, a profile card (bio, followers, Follow button) that stays open when entered.
- [Tooltip Directions](https://nuancier.dev/c/tooltip-set): Tooltips with an arrow in four directions, shown on hover and keyboard focus, closed with Escape.
- [Bottom Sheet](https://nuancier.dev/c/bottom-sheet): A sheet that slides up from the bottom with its handle: close it by dragging down, with Escape or by tapping the backdrop.
- [Image Lightbox](https://nuancier.dev/c/image-lightbox): A thumbnail grid that opens into a full viewer: previous / next (arrow keys), counter, Escape to close.
- [Color Popover](https://nuancier.dev/c/swatch-popover): A color picker popover anchored under its trigger with an arrow: keyboard swatch grid, hex field, Escape or outside click to close, focus returns to the button.
- [Footnote Tooltips](https://nuancier.dev/c/footnote-tips): Text with footnotes: each numbered reference opens a bubble with the note and its source on hover or focus, placed above or below depending on space, never leaving the frame.
- [Share Dialog](https://nuancier.dev/c/share-modal): A share dialog over a blurred page: email invites as chips (Enter or comma), role picker, copyable link with confirmation, a public access switch and a member list; focus is trapped, Escape closes and returns focus.
- [Onboarding Tour Modal](https://nuancier.dev/c/onboarding-modal): A three-step welcome dialog: an animated illustration that changes at each step, smoothly adapting height, clickable dots, Back / Next, arrow keys and "Get started" at the end; a button replays the tour.
- [Multi-step Wizard Modal](https://nuancier.dev/c/wizard-modal): A three-step wizard modal (project, team, confirm) with a step indicator, sliding panes, validation before continuing, trapped focus, Escape to close and focus returned to the opener.
- [Type to Confirm Dialog](https://nuancier.dev/c/type-confirm-dialog): A dangerous delete dialog: it lists what will be lost, asks to type the exact project name to enable the red button (which fills while held), traps focus, closes with Escape and returns focus to the opener.
- [Product Quick View](https://nuancier.dev/c/quick-view-modal): A grid of products with real photos; "Quick view" opens a modal that grows from the clicked tile, with the photo, price, size picker and an Add to cart button that bumps the counter; Escape, trapped focus and focus returned.
- [Keyboard Shortcuts Sheet](https://nuancier.dev/c/shortcut-sheet): An app’s keyboard shortcuts sheet, like in the best tools: opens with ? or a button, filters as you type, groups shortcuts (navigation, editing, view), shows ⌘ on Mac and Ctrl elsewhere; a real modal dialog (focus trapped, Escape closes and returns focus).
- [Product Tour](https://nuancier.dev/c/product-tour): A guided tour on a real interface: a spotlight cuts the highlighted element out of a dark veil, a bubble explains the step with Back, Next and Skip, dots show progress (2 of 4); focus follows the bubble, arrow keys change steps, Escape ends it and the bubble repositions when the size changes.

### Buttons (20)

- [Shimmer Button](https://nuancier.dev/c/shimmer-button): A glint crosses the button at regular intervals.
- [Loading Button](https://nuancier.dev/c/loading-button): The button goes to loading then success, without changing width.
- [Copy Button](https://nuancier.dev/c/copy-button): Copies a command and confirms with an animated check.
- [Gooey Menu](https://nuancier.dev/c/gooey-menu): A floating button that unfolds its actions with a liquid effect.
- [Hover Fill](https://nuancier.dev/c/hover-fill): The background fills from the side the mouse enters.
- [Social Buttons](https://nuancier.dev/c/social-buttons): A row of social icons that lift and take on their color.
- [Bell Toggle](https://nuancier.dev/c/bell-toggle): Subscribe button: the bell rings and settles, the label flips and waves ripple out.
- [Specular Button](https://nuancier.dev/c/specular-button): A sleek dark button whose specular highlight follows the cursor, on the surface and the edge.
- [Shimmer Button](https://nuancier.dev/c/mu-shimmer-button): A black pill button whose edge is traveled by a spark of light.
- [Rainbow Button](https://nuancier.dev/c/mu-rainbow-button): A dark button with an animated rainbow border and a blurred colored glow below.
- [Pulsating Button](https://nuancier.dev/c/mu-pulsating-button): A button surrounded by a softly pulsing halo to catch the eye.
- [Ripple Button](https://nuancier.dev/c/mu-ripple-button): Each click sends a ripple from the touched point that spreads and fades.
- [Animated Subscribe Button](https://nuancier.dev/c/mu-subscribe-button): A “Follow” button that flips to “Subscribed” with a check on click, and back on a second click.
- [Shiny Button](https://nuancier.dev/c/mu-shiny-button): A glass button whose slanted sheen sweeps the text and the edge, with a small pop-in bounce.
- [Interactive Hover Button](https://nuancier.dev/c/mu-interactive-hover-button): On hover, a dot grows to fill the button while the text slides and an arrow arrives.
- [Glow Effect](https://nuancier.dev/c/mp-glow-effect): A blurred multicolor glow spinning behind a button or card.
- [Theme Toggle](https://nuancier.dev/c/theme-toggle): A light / dark switch where the sun morphs into a moon (rays retract, crescent slides) and the card changes theme.
- [Formatting Toggle Group](https://nuancier.dev/c/format-toggles): A formatting toolbar: bold, italic, underline and strikethrough as multiple toggle buttons, alignment as a single choice with a pill sliding under the active one; arrow keys in the bar, Ctrl+B / I / U, live text preview.
- [Day Night Scenery Switch](https://nuancier.dev/c/scenery-toggle): A big day / night switch holding a tiny landscape: the sun turns into a cratered moon, clouds give way to twinkling stars, hills darken and the sky shifts from blue to night violet; a real switch role.
- [Icon Toggles](https://nuancier.dev/c/icon-toggles): A set of icon toggle buttons (favorite, bookmark, sound, visibility, lock): each click morphs the icon with its own animation — the heart fills with a burst, the bookmark drops, the sound wave cuts, the eye closes, the lock opens — with aria-pressed and a matching label.

### 3D (11)

- [Rotating Cube](https://nuancier.dev/c/cube): A 3D CSS cube you rotate by dragging.
- [Perspective Stack](https://nuancier.dev/c/card-stack-3d): Cards in perspective that spread apart on hover.
- [Parallax Layers](https://nuancier.dev/c/parallax-layers): Several layers moving at different speeds with the mouse.
- [Coverflow](https://nuancier.dev/c/coverflow): A 3D fanned carousel of cards, arrows or click to navigate.
- [Infinite Spiral](https://nuancier.dev/c/infinite-spiral): Images laid along an endless 3D spiral you scroll with the wheel or by dragging.
- [Dome Gallery](https://nuancier.dev/c/dome-gallery): Stand inside a sphere lined with images: drag to spin it, with inertia.
- [Flying Posters](https://nuancier.dev/c/flying-posters): Posters flying toward you in perspective, looping; the wheel speeds them up.
- [Model Viewer](https://nuancier.dev/c/model-viewer): A shaded 3D object (torus knot) rendered on canvas: drag to rotate, wheel to zoom.
- [Lanyard](https://nuancier.dev/c/lanyard): A badge hanging from its lanyard: grab it, throw it, it swings with real rope physics.
- [Cube Section Navigator](https://nuancier.dev/c/cube-nav): A 3D cube whose faces are sections (Home, Work, Team, Contact): buttons, arrow keys or a swipe turn the cube in perspective to the chosen face, which lights up while the others dim.
- [Isometric Bar Chart](https://nuancier.dev/c/iso-bars): An isometric CSS 3D bar chart: each bar is a real three-face prism growing from the floor, hover or focus highlights it and shows its value, and a Revenue / Users / Orders switch grows or shrinks every bar.

### Media (26)

- [Audio Player](https://nuancier.dev/c/audio-player): A compact player with a clickable waveform and elapsed time (simulated).
- [Lightbox Gallery](https://nuancier.dev/c/image-gallery): A thumbnail grid that opens full size, arrows to navigate.
- [Video Card](https://nuancier.dev/c/video-card): A video thumbnail with a pulsing play button and duration.
- [Circular Gallery](https://nuancier.dev/c/circular-gallery): Cards arranged in a 3D ring you spin by dragging.
- [Infinite Carousel](https://nuancier.dev/c/infinite-scroll-menu): An endless carousel, dragged by hand with inertia.
- [Flex Carousel](https://nuancier.dev/c/flex-carousel): A carousel where the active card widens and pushes the others, which fold into thin slats.
- [Depth Carousel](https://nuancier.dev/c/depth-carousel): Cards stacked in depth: the next one waits behind, smaller and darker.
- [Morph Slider](https://nuancier.dev/c/morph-slider): A slideshow whose images melt into each other with a liquid distortion.
- [Drift Wall](https://nuancier.dev/c/drift-wall): A wall of thumbnails in columns drifting in alternate directions, tilted in perspective.
- [Accordion Gallery](https://nuancier.dev/c/accordion-gallery): Stacked image strips: the hovered one opens in color, the others shrink to gray.
- [Carousel](https://nuancier.dev/c/carousel): A classic swipeable carousel: it snaps to a card, with 3D tilt and dots.
- [Backlight](https://nuancier.dev/c/mu-backlight): A saturated glow spilling around an image, like a screen backlight.
- [Terminal](https://nuancier.dev/c/mu-terminal): A terminal window where commands type themselves, then result lines appear one by one.
- [Pixel Image](https://nuancier.dev/c/mu-pixel-image): An image appearing tile by tile in random order, first in gray, then regaining its colors.
- [Blur Fade](https://nuancier.dev/c/mu-blur-fade): Gallery items appear one by one, coming out of a blur with a small slide.
- [Image Comparison](https://nuancier.dev/c/mp-image-comparison): Two stacked images split by a slider you drag (or that follows the mouse) to compare them.
- [Expanding Panels](https://nuancier.dev/c/image-accordion): Vertical panels side by side: the hovered or chosen one widens and reveals its title, the others narrow.
- [Custom Video Player](https://nuancier.dev/c/video-controls): A player with custom controls (play, draggable progress bar, time, sound, full screen) over an animated scene that really plays.
- [Video Card Grid](https://nuancier.dev/c/video-card-hover): Video thumbnails: on hover the image moves, a preview bar advances and the play button pulses; duration and views overlaid.
- [Chapter Player](https://nuancier.dev/c/video-chapters): A player split into chapters: a segmented progress bar with a hover tooltip, a clickable chapter list and the chapter title shown on the picture at each change.
- [Ambient Mode Player](https://nuancier.dev/c/ambient-player): A player in "ambient mode": a blurred, enlarged copy of the picture spills behind the frame and takes its colors live; a switch turns the effect off.
- [Clip Trimmer](https://nuancier.dev/c/clip-trimmer): A clip trimmer: animated preview, a ten-frame filmstrip, in and out handles (drag or arrow keys) that dim the rest, a playhead looping inside the selection and the clip length.
- [Video Playlist Player](https://nuancier.dev/c/video-playlist): A player with its queue: the picture is an animated canvas scene, the seek bar is clickable, the list marks the current video with an animated equalizer and auto-plays the next one.
- [Thumbnail Carousel](https://nuancier.dev/c/thumb-carousel): An image carousel with a thumbnail strip: autoplay with a gauge filling under the active thumbnail, swipe, arrow keys, pause on hover and focus, and the strip scrolls to keep the active thumbnail in view.
- [Story Reels Player](https://nuancier.dev/c/story-reels): A vertical short-video player in the style of stories: progress segments on top, real photos slowly zooming, tap left or right (or arrow keys) to switch, long press to pause and a mute toggle.
- [Ken Burns Slideshow](https://nuancier.dev/c/kenburns-slideshow): A full-frame slideshow of real photos with a Ken Burns effect: each image slowly zooms and pans in a different direction, captions rise in, a 01/05 counter and a time bar follow the autoplay; arrows, dots and pause on hover.

### Cursors (50)

- [Glow Cursor](https://nuancier.dev/c/glow-cursor): A soft halo replaces the cursor and reveals the content around it.
- [Target Cursor](https://nuancier.dev/c/target-cursor): A spinning cornered reticle that snaps onto the hovered button.
- [Blob Cursor](https://nuancier.dev/c/blob-cursor): Three blobs merged by a filter, following the mouse in a line.
- [Crosshair](https://nuancier.dev/c/crosshair): Two thin lines that follow the cursor, with coordinates.
- [Image Trail](https://nuancier.dev/c/image-trail): Colored cards appear along the mouse path, then fade.
- [Magnet Lines](https://nuancier.dev/c/magnet-lines): A grid of small strokes that all point toward the cursor.
- [Pointer](https://nuancier.dev/c/mu-pointer): Inside an area, the cursor is replaced by a custom arrow that fades in and out smoothly.
- [Smooth Cursor](https://nuancier.dev/c/mu-smooth-cursor): An arrow cursor following the mouse on a spring, turning toward the motion and squishing at speed.
- [Rainbow Cursor](https://nuancier.dev/c/cursor-rainbow): A rainbow ribbon that follows the mouse and ripples, like on 90s personal homepages.
- [Emoji Rain](https://nuancier.dev/c/cursor-emoji-rain): Emojis dropping from the mouse and shrinking as they fall, each on its own path.
- [Elastic Emoji](https://nuancier.dev/c/cursor-elastic-emoji): A chain of emojis linked by springs, hanging under the mouse and bouncing off the floor.
- [Ghost Cursor](https://nuancier.dev/c/cursor-ghost): Ghost copies of the arrow stay behind the mouse and slowly fade out.
- [Trailing Cursor](https://nuancier.dev/c/cursor-trailing): A trail of arrows following the mouse in single file, each copy a little behind.
- [Text Flag](https://nuancier.dev/c/cursor-text-flag): A sentence floating behind the mouse like a flag, letter after letter.
- [Following Dot](https://nuancier.dev/c/cursor-following-dot): A large translucent dot catching up with the mouse with a slight delay.
- [Bubble Cursor](https://nuancier.dev/c/cursor-bubbles): Bubbles escaping from the mouse, growing as they rise and then popping.
- [Snowflake Cursor](https://nuancier.dev/c/cursor-snowflakes): Snowflakes breaking off the mouse and twirling down.
- [Fairy Dust](https://nuancier.dev/c/cursor-fairy-dust): Colorful star dust falling from the mouse and sparkling.
- [Character Cursor](https://nuancier.dev/c/cursor-characters): Letters bursting out of the mouse in every direction, spinning.
- [Clock Cursor](https://nuancier.dev/c/cursor-clock): A clock made of characters that follows the mouse, with the date spinning around the face; each character arrives a beat late.
- [Ants Cursor](https://nuancier.dev/c/cursor-ants): Ants wander around the box; bring the mouse close and they line up to follow it.
- [Kursor Ring](https://nuancier.dev/c/kursor-1): A thin ring and a dot: the ring follows with a slight delay and fills in over buttons.
- [Kursor Blob](https://nuancier.dev/c/kursor-2): A solid disc following the mouse with a small dot on its heels; it fades and grows on hover.
- [Kursor Square](https://nuancier.dev/c/kursor-3): A crisp square and a square dot, snappy, growing on hover and tightening on click.
- [Kursor Halo](https://nuancier.dev/c/kursor-4): A large subtle halo around a precise dot; on hover the halo tightens.
- [Kursor Minimal](https://nuancier.dev/c/kursor-5): A tiny lone circle that gently swells over clickable elements.
- [Magic Circle](https://nuancier.dev/c/magic-circle-move): A circle that follows the mouse, then snaps onto the hovered button taking its shape; the button follows the mouse a little.
- [Magic Blur Pointer](https://nuancier.dev/c/magic-pointer-blur): A white dot that turns into a large, glowing, blurred ring when hovering buttons.
- [Magic Overlay Pointer](https://nuancier.dev/c/magic-pointer-overlay): A dot that becomes a difference-blend disc on hover, inverting the colors beneath it.
- [Cursor Dot](https://nuancier.dev/c/cursor-dot): A large exclusion-blend circle gliding behind the mouse and growing over clickable elements.
- [Color Trail](https://nuancier.dev/c/trail-default): A trail of randomly colored dots fading out behind the mouse.
- [Gradient Trail](https://nuancier.dev/c/trail-gradient): A trail of two-color gradient dots that gently fade away.
- [Sparkle Trail](https://nuancier.dev/c/trail-sparkle): A trail of neon dots glowing with a colored halo before disappearing.
- [iPad Cursor](https://nuancier.dev/c/ipad-cursor): The iPad cursor: a gray disc that morphs into a highlight of the hovered button and pulls it toward the mouse.
- [iPad Cursor Light](https://nuancier.dev/c/ipad-cursor-light): The iPad cursor with a light reflection that follows the mouse across the hovered button.
- [Skew Follower](https://nuancier.dev/c/mf-skew): A ball that follows the mouse and stretches in the direction of motion, like a droplet.
- [Text Follower](https://nuancier.dev/c/mf-text): A ball that follows the mouse and turns into a pill with a word (“View”, “Open”) over buttons.
- [Exclusion Follower](https://nuancier.dev/c/mf-exclusion): An exclusion-blend ball on a light background: it inverts the colors of whatever it passes over.
- [Fluid Cursor](https://nuancier.dev/c/fluid-cursor): Colored ink gushing from the mouse and swirling like a real fluid.
- [Smoke Cursor](https://nuancier.dev/c/fluid-smoke): Soft white smoke following the mouse and slowly dissipating.
- [Particle Trail](https://nuancier.dev/c/tsp-trail): Every mouse movement sows colored particles that fly off and fade out.
- [Attract](https://nuancier.dev/c/tsp-attract): A cloud of particles drawn toward the mouse, re-forming as soon as it moves away.
- [Repulse](https://nuancier.dev/c/tsp-repulse): Particles move away from the mouse, opening a hole around it.
- [Bubble Hover](https://nuancier.dev/c/tsp-bubble): Particles near the mouse swell, brighten and change color.
- [Grab](https://nuancier.dev/c/tsp-grab): The mouse casts threads toward nearby particles, like a web.
- [Connect](https://nuancier.dev/c/tsp-cursor-connect): Particles under the mouse link up into a network that follows it.
- [Flashlight](https://nuancier.dev/c/tsp-light): A flashlight: the mouse lights up the shapes and casts their shadows.
- [Slow Motion](https://nuancier.dev/c/tsp-slow): Around the mouse, time slows down: particles move in slow motion there.
- [Bounce Off](https://nuancier.dev/c/tsp-bounce): The mouse is a solid obstacle: particles bounce off it.
- [Click Burst](https://nuancier.dev/c/tsp-click-burst): Each click shoots a burst of colorful particles out of the mouse.

### Hover effects (12)

- [Glare Hover](https://nuancier.dev/c/glare-hover): A glare of light sweeps diagonally across the card on hover.
- [Star Border](https://nuancier.dev/c/star-border): Two shooting stars glide along the edges of the button.
- [Electric Border](https://nuancier.dev/c/electric-border): A border that crackles like an electric arc.
- [Gradual Blur](https://nuancier.dev/c/gradual-blur): A progressive blur at the bottom of a scrolling area to fade the content.
- [Pixel Transition](https://nuancier.dev/c/pixel-transition): On hover, the card rebuilds itself in pixels into its other face.
- [Border Glow](https://nuancier.dev/c/border-glow): A card whose edge lights up in a gradient on the side the mouse comes from.
- [Glare Hover](https://nuancier.dev/c/mu-glare-hover): On hover, a slanted light glare crosses a card from corner to corner.
- [Spotlight](https://nuancier.dev/c/mp-spotlight): A soft blurred light follows the mouse inside a card on a spring, and fades when it leaves.
- [Corner Brackets](https://nuancier.dev/c/corner-brackets): Four corner brackets frame the card and spread out on hover or focus, like a viewfinder.
- [Draw-on Border](https://nuancier.dev/c/draw-border): On hover the outline draws itself around the button in one stroke, then retracts.
- [Hover Reveal List](https://nuancier.dev/c/hover-reveal-list): A list of projects in big titles: on hover a floating image follows the pointer with lag and tilts with speed, other rows fade and an arrow slides in; with the keyboard the image appears next to the focused row.
- [Slice Reveal Cards](https://nuancier.dev/c/slice-reveal): Photo cards cut into five vertical slices: on hover or focus the slices slide away one after another, alternating up and down, to reveal a colored text panel, then slide back in reverse order when you leave.

## License

Components are free to use in your own projects (personal or commercial). Redistributing the catalogue itself is not allowed. Parts adapted from MIT / Apache libraries keep their license (see THIRD-PARTY-NOTICES.md).