Theme
Dither0.40

SpotYourSite

Premium component library

Every example from React Bits, Aceternity UI, and Componentry — rebuilt natively as live demos (no library dependencies), deduped across the three. Filter by source or type, recolor everything with the theme picker (top-right), and ✕ any card you don't want (recover it anytime). The bottom section catalogs 20 premium brand design-systems from Refero.

Components · React Bits + Aceternity + Componentry

245 shown

Split Text

RB

chars/words split + staggered entrance

Blur Text

RB

words reveal from blur to sharp

Circular Text

RB

text laid in a rotating ring

Count Up

RB

number animates 0→target

Curved Loop

RB

text on a curved path looping endlessly

Decrypted Text

RBAC

scrambled chars resolve into real text

Falling Text

RB

letters drop with gravity + pile up

Fuzzy Text

RB

noisy fuzzy displaced edge on hover

Glitch Text

RB

RGB-split datamosh glitch flicker

Gradient Text

RB

moving color gradient sweeping the fill

Rotating Text

RB

cycles words, sliding each in/out

Scrambled Text

RB

letters scramble on hover then settle

Scroll Float

RB

text rises into place on scroll

Scroll Reveal

RB

words fade/blur in line-by-line on scroll

Scroll Velocity

RBCO

marquee text skews with scroll velocity

Shiny Text

RB

moving shine glare sweeps across text

Shuffle

RB

characters shuffle into the final string

Text Cursor

RB

trail of characters follows the cursor

Text Pressure

RB

variable-font thickens by cursor proximity

Text Type

RBAC

typewriter typing + deleting with caret

True Focus

RB

focused word sharpens, others blur, cycling

Variable Proximity

RB

per-letter weight shifts by cursor distance

ASCII Text

RBAC

text rendered as animated ASCII art

Colourful Text

AC

per-letter animated multicolor text

Flip Words

AC

cycles a word list with flip transition

Text Generate

AC

words fade/blur in one-by-one (AI-typing)

Text Hover

AC

SVG text fills/strokes following cursor

Text Reveal Card

AC

hover wipes to reveal hidden text

Typewriter

AC

text typed char-by-char with cursor

Cover

AC

animated highlight cover sweeping over text

Squiggly Text

AC

animated squiggly underline path

Container Text Flip

AC

word in a container flips/cycles

Split-Flap Board

ACCO

airport split-flap flipping text

Hyper Text

CO

scrambles letters then settles

Letter Cascade

CO

letters scatter + blur then reassemble

Text Repel

CO

letters repel away from the cursor

Pointer Highlight

AC

framed highlight box with pointer label

Aurora

RBAC

flowing aurora gradient waves

Balatro

RB

swirling psychedelic shader gradient

Ballpit

RB

physics pit of bouncing 3D balls

Beams

RBAC

light beams/streaks sweeping across

Beams w/ Collision

AC

falling beams explode on a baseline

Color Bends

RB

bending warping color-gradient field

Dark Veil

RB

dark animated veil/smoke shader

Dither

RBACCO

animated retro dithered gradient

Dot Field

RB

dots wave to cursor proximity

Dot Grid

RB

grid of dots ripple around cursor

Faulty Terminal

RB

CRT terminal scanline glitch

Ferrofluid

RB

magnetic ferrofluid blob spikes/morphs

Floating Lines

RBAC

drifting flowing line streaks

Galaxy

RB

rotating starfield/galaxy of points

Gradient Blinds

RB

gradient through venetian-blind slats

Grainient

RB

grainy animated gradient

Grid Distortion

RB

grid warped by a cursor lens

Grid Motion

RB

grid of tiles drifting opposite ways

Grid Scan

RB

scan line sweeping a glowing grid

Hyperspeed

RB

hyperspace light-streak highway tunnel

Iridescence

RB

oil-slick holographic shimmer shader

Letter Glitch

RB

matrix grid of glitching letters

Light Pillar

RB

vertical volumetric light beam

Light Rays

RB

god-rays radial beams from a point

Lightfall

RB

falling streaks of light particles

Lightning

RB

animated lightning bolts/arcs

Line Waves

RB

waving horizontal line patterns

Liquid Chrome

RB

reflective liquid-chrome metal shader

Liquid Ether

RBCO

flowing ink fluid following cursor

Orb

RB

glowing animated orb reacting to hover

Particles

RBAC

particle field reacting to cursor

Pixel Blast

RB

bursting pixel particle field

Pixel Snow

RB

falling pixelated snow particles

Plasma

RB

classic animated plasma color shader

Plasma Wave

RBCO

wavy flowing plasma energy ribbon

Prism

RB

rotating 3D prism refracting light

Prismatic Burst

RB

radial prismatic rainbow burst

Radar

RB

sweeping radar scan with blips

Ripple Grid

RBAC

grid ripples in waves from cursor

Shape Grid

RB

grid of shapes morph on interaction

Side Rays

RB

light rays from the side edge

Silk

RB

flowing silk fabric shader waves

Threads

RB

thread lines bend toward the cursor

Waves

RBAC

animated wavy line/grid wave field

Vortex

AC

swirling particle vortex backdrop

Meteors

AC

diagonal shooting-meteor streaks

Shooting Stars

AC

starfield with periodic shooting stars

Sparkles

AC

configurable sparkle/particle overlay

Background Boxes

AC

grid of boxes color on hover

Gradient Animation

AC

morphing gooey gradient blobs

Background Lines

AC

flowing SVG line paths

Background Ripple

AC

grid ripples outward from click

Wavy Background

AC

layered sine waves background

Grid & Dot Bg

AC

grid / dotted background patterns

Noise Background

ACCO

film-grain noise texture background

Circuit Board

CO

animated PCB circuit traces

Hero Geometric

CO

geometric shapes for hero sections

Matrix Rain

ACCO

falling Matrix digital rain

Particle Galaxy

CO

swirling galaxy of particles

Closing Plasma

CO

plasma field for footer/CTA

Animated Gradient

CO

WebGL gradient with noise

Dotted Glow Bg

AC

dotted grid with glowing pulse

Animated Content

RB

wrapper animates children in on mount/scroll

Antigravity

RB

elements float up as if gravity reversed

Blob Cursor

RB

gooey blob morphs around the cursor

Click Spark

RB

spark burst at the click point

Crosshair

RB

targeting crosshair tracks cursor

Cubes

RB

grid of 3D cubes rotate on hover

Electric Border

RB

electric glow runs along a border

Ghost Cursor

RB

trailing ghost afterimage on cursor

Glare Hover

RBAC

glossy glare sweep across a card

Gradual Blur

RB

progressive blur gradient on an edge

Image Trail

RBCO

trail of images along cursor path

Laser Flow

RB

flowing laser-beam light streaks

Logo Loop

RBAC

infinite logo marquee

Magic Rings

RB

expanding concentric ripples

Magnet

RB

element pulled toward cursor on proximity

Magnet Lines

RBCO

grid of lines point toward cursor

Meta Balls

RB

gooey metaballs merge/separate

Metallic Paint

RB

liquid chrome shader on a shape

Noise

RB

animated film-grain overlay

Orbit Images

RB

images orbit a center in 3D

Pixel Trail

RB

pixelated square trail on cursor

Pixel Transition

RB

pixelated dissolve between states

Ribbons

RB

ribbon streamers follow cursor physics

Shape Blur

RB

blurred shape spotlight on cursor

Splash Cursor

RB

fluid splash reacting to cursor

Star Border

RB

sparkles travel around a border

Sticker Peel

RB

sticker peels at corner on hover

Target Cursor

RB

cursor snaps onto targetable elements

Following Pointer

AC

custom label follows cursor over area

Direction Aware Hover

AC

overlay enters from hover direction

SVG Mask Effect

AC

cursor reveals content through a mask

Image Ripple

CO

water-ripple distortion over an image

Infinite Image Field

CO

endless cursor-driven photo canvas

Eye Tracking

CO

eyes follow cursor with blink physics

WebGL Liquid

CO

cinematic liquid shader distortion

Particle Typography

CO

text from particles reacting to cursor

Animated List

RB

list items animate in + highlight

Border Glow

RBCO

glowing border tracks the cursor

Bounce Cards

RB

card stack springs into a fan

Bubble Menu

RB

menu items expand as bubbles

Card Nav

RB

nav from expanding morphing cards

Card Swap

RB

stacked cards 3D-shuffle to front

Carousel

RBAC

sliding/3D rotating card carousel

Chroma Grid

RB

cards with chromatic spotlight on cursor

Circular Gallery

RB

images on a curved scrolling track

Counter

RB

rolling-digit number counter

Decay Card

RB

card warps/distorts toward cursor

Dock

RBCO

macOS dock icons magnify on hover

Dome Gallery

RB

images on inside of a draggable 3D dome

Elastic Slider

RB

slider with stretchy rubber-band handle

Flowing Menu

RB

menu marquee fill sweeps on hover

Fluid Glass

RB

glass refraction lens over content

Flying Posters

RB

posters fly/rotate through 3D space

Folder

RB

folder opens to reveal cards inside

Glass Icons

RB

glassmorphic icon buttons w/ tilt/glow

Glass Surface

RB

frosted glass panel w/ refraction

Gooey Nav

RB

gooey liquid blob morphs between items

Infinite Menu

RB

3D infinite scrollable sphere menu

Lanyard

RB

physics ID card swinging on a lanyard

Magic Bento

RBAC

bento grid w/ spotlight+glow+tilt+particles

Masonry

RB

animated reflowing masonry grid

Model Viewer

RB

interactive 3D GLB model viewer

Pill Nav

RB

pill nav with animated active indicator

Pixel Card

RBAC

card pixel-reveal effect on hover

Profile Card

RB

tilting holographic profile card w/ glare

Reflective Card

RB

reflective sheen tracks cursor/tilt

Scroll Stack

RBCO

cards stack/scale on scroll (sticky pile)

Spotlight Card

RBACCO

radial spotlight glow follows cursor

Stack

RB

draggable Tinder-style card stack

Staggered Menu

RB

fullscreen menu items reveal staggered

Stepper

RB

multi-step wizard w/ animated transitions

Tilted Card

RBAC

3D parallax tilt + glare on mouse move

3D Card Effect

AC

card tilts 3D, layers lift on hover

3D Pin

AC

map-style pin pops up in 3D

3D Marquee

AC

tilted grid of images as a 3D marquee

Animated Modal

AC

modal with spring scale/fade open

Animated Testimonials

AC

stacked testimonial cards swap

Animated Tooltip

AC

avatar tooltip springs up + tilts

Animated Tabs

AC

tabs with sliding active pill

Apple Cards Carousel

AC

cards expand to full content

Bento Grid

AC

asymmetric bento feature grid

Canvas Reveal

AC

dot-matrix canvas reveals on hover

Card Stack

AC

auto-cycling stack of flipping cards

Comet Card

AC

card with comet streak hover + 3D tilt

Compare

AC

before/after slider w/ draggable divider

Container Scroll

AC

content rotates into a device frame on scroll

Draggable Card

AC

card dragged with throw physics

Evervault Card

AC

hover reveals encrypted-hash matrix

Expandable Card

AC

card expands into a modal detail

File Upload

AC

drag-drop file upload w/ animation

Floating Dock

AC

macOS dock icons magnify on hover

Floating Navbar

AC

navbar hides/reveals on scroll, floats

Focus Cards

AC

hovered card sharp, siblings blur

Glare Card

AC

card w/ moving glossy glare

Glowing Effect

AC

border glow tracks cursor around element

Gooey Input

AC

input w/ gooey liquid focus

Hero Highlight

AC

hero text w/ animated highlight + dot grid

Hero Parallax

AC

scroll parallax wall of images

Hover Border Gradient

AC

button animated gradient border on hover

Images Slider

AC

fullscreen image slider w/ motion

Infinite Moving Cards

AC

marquee of cards looping infinitely

Lamp Effect

AC

conic lamp light glow behind heading

Layout Grid

AC

grid cells expand to a focused layout

Lens

AC

magnifying lens zoom over image

Link Preview

AC

hover link → preview card popup

Macbook Scroll

AC

macbook frame scales screen on scroll

Magnetic Button

AC

button pulls toward cursor

Moving Border

AC

light travels around an element border

Multi Step Loader

AC

sequential checklist loader

Navbar Menu

AC

animated dropdown nav w/ previews

Vanish Input

AC

placeholder cycles; text vanishes to particles

Resizable Navbar

AC

navbar shrinks/resizes on scroll

Sidebar

AC

animated collapsible sidebar

Signup Form

AC

styled animated signup form

Spotlight

AC

spotlight beam over a hero section

Stateful Button

AC

button morphs loading/success states

Sticky Banner

AC

dismissible banner sticks to top

Sticky Scroll Reveal

AC

sticky panel reveals content on scroll

Tabs

AC

animated tab switcher

Tailwind Buttons

AC

gallery of copy-paste button styles

Timeline

AC

vertical scroll-animated timeline

Tracing Beam

AC

beam traces scroll progress down page

Wobble Card

AC

card wobbles/squishes on hover

Code Block

AC

syntax code block w/ copy + tabs

Terminal

AC

animated fake terminal typing output

Keyboard

ACCO

visual mac keyboard component

Logo Clouds

AC

animated grid/marquee of brand logos

Notch

AC

iPhone-notch style UI element

Sticky Scroll Cards

CO

card stack pins+scales while scrolling

Music Player

CO

vinyl player w/ swinging tonearm

Scroll Split Card

CO

card splits into 3 panels + flips on scroll

Flight Status Card

CO

airline flight-status info card

Collection Surfer

CO

swipeable collection browser

GitHub Calendar

CO

GitHub contribution heatmap

Scroll Choreography

CO

scroll-driven image choreography

Layered Stack

CO

depth-layered cards react to hover

Signature

CO

SVG signature draws like handwriting

Command Menu

CO

⌘K command palette / search

Auth Modal

CO

animated sign-in/sign-up modal

Scrub Input

CO

drag-to-scrub numeric input

Shimmer Button

CO

button w/ sweeping shimmer highlight

Pulsating Button

CO

button w/ pulsing glow ring

Interactive Hover Button

CO

button w/ layered hover animation

Showcase Card

CO

product/feature showcase card

Testimonial Marquee

CO

looping marquee of testimonials

Liquid Blob

CO

morphing organic liquid blob

Premium Brand Pages / Elements · from Refero

The top 20 brand design-systems from styles.refero.design — homepage, the page style, the unique elements that set each apart, and its signature hero elements.

Linear homepage

Linear

visit ↗

midnight command deck — acid-lime

Style

Dark command-deck UI. Near-black canvas, ultra-fine 1px borders, acid-lime accent, tight Inter type, subtle gradient glows.

What sets it apart
  • Pixel-crisp 1px hairline borders everywhere
  • Acid-lime single-accent on pure dark
  • Buttery sub-100ms hover transitions
  • Gradient 'aurora' glow behind hero
  • Keyboard-first ⌘K command bar
Hero elements
  • Full-bleed dark hero with a faint conic glow
  • Crisp product screenshot floating with soft shadow
  • Single bright CTA pill
Resend homepage

Resend

visit ↗

Obsidian developer terminal

Style

Obsidian-black developer aesthetic. Monospace accents, code-first hero, restrained palette, high-contrast white text.

What sets it apart
  • Code block AS the hero
  • Mono + sans pairing
  • Black w/ a single warm accent
  • Email-send animation motif
Hero elements
  • Live code snippet hero
  • Animated send/deliver visual
  • Terminal-style status line
Anthropic homepage

Anthropic

visit ↗

Research journal on warm paper

Style

Warm-paper editorial. Cream/clay background, serif display headers, generous whitespace, restrained illustration.

What sets it apart
  • Cream not white background
  • Serif display type
  • Editorial column layout
  • Soft clay accent palette
Hero elements
  • Large serif headline on cream
  • Minimal single illustration
  • Calm low-contrast CTA
Cursor homepage

Cursor

visit ↗

Warm paper command center

Style

Warm-neutral dev tool. Soft off-white, rounded cards, gentle gradient hero, friendly sans.

What sets it apart
  • Warm off-white not stark white
  • Rounded soft cards
  • Subtle gradient hero glow
  • Editor screenshot centerpiece
Hero elements
  • Centered headline + editor screenshot
  • Soft gradient backdrop
  • Download CTA
Apple homepage

Gallery wall at natural light

Style

Gallery-grade product showcase. Massive product imagery, huge type, scroll-driven reveals, pristine white.

What sets it apart
  • Edge-to-edge product hero imagery
  • Enormous SF-Pro display type
  • Scroll-pinned product reveals
  • Immaculate negative space
Hero elements
  • Full-bleed product shot
  • Giant centered headline
  • Tiny dual text-link CTAs
ElevenLabs homepage

ElevenLabs

visit ↗

Parchment command terminal — warm

Style

Warm-tech audio brand. Parchment/cream + dark sections, waveform motifs, mono accents.

What sets it apart
  • Audio waveform visual motifs
  • Warm parchment + dark contrast
  • Voice-play inline widgets
Hero elements
  • Waveform-driven hero
  • Play-voice interactive sample
  • Warm gradient panel
Mercury homepage

Mercury

visit ↗

Mountain-top command center

Style

Premium fintech. Cool gradients, glassy cards, precise grid, confident sans, soft depth shadows.

What sets it apart
  • Glassy translucent product cards
  • Cool blue-violet gradient washes
  • Dashboard screenshot hero
  • Refined depth/shadow system
Hero elements
  • Gradient sky hero
  • Floating glass dashboard mock
  • Single confident CTA
Vercel homepage

Vercel

visit ↗

Black-and-white precision grid

Style

Stark monochrome. Pure black/white, geometric, triangle motif, mono code accents, razor grid.

What sets it apart
  • Pure B&W with surgical contrast
  • Triangle brand geometry
  • Deploy/preview motion motifs
  • Mono code typography
Hero elements
  • Black hero, white headline
  • Animated deploy graphic
  • Dual CTA (deploy / docs)
Stripe homepage

Stripe

visit ↗

Iridescent gradient atelier

Style

Signature animated gradient. Multi-stop flowing gradient hero, crisp white cards, precise type, depth.

What sets it apart
  • The famous animated skewed gradient hero
  • Layered API code panels
  • Crisp card grid on white
  • Subtle 3D depth
Hero elements
  • Skewed animated gradient band
  • Headline over gradient
  • Live API code panel
Caldera homepage

Caldera

visit ↗

Risograph zine on warm concrete

Style

Risograph-zine indie. Warm concrete background, riso-print texture, bold display, off-register color.

What sets it apart
  • Risograph print texture
  • Warm concrete neutral
  • Off-register duotone accents
  • Zine-style bold display
Hero elements
  • Textured concrete hero
  • Bold riso display headline
  • Grainy duotone imagery
Air homepage

Sky canvas, frosted glass

Style

Airy frosted-glass. Light sky-gradient, glassmorphic panels, soft shadows, clean sans.

What sets it apart
  • Frosted-glass panels over sky gradient
  • Light airy palette
  • Soft floating cards
Hero elements
  • Sky-gradient hero
  • Frosted glass product mock
  • Light CTA
LottieFiles homepage

LottieFiles

visit ↗

Playful animation studio on warm

Style

Playful motion-first. Warm bright palette, animated illustrations everywhere, rounded friendly type.

What sets it apart
  • Lottie animations as hero content
  • Bright playful palette
  • Rounded friendly shapes
  • Motion-everywhere
Hero elements
  • Animated illustration hero
  • Playful headline
  • Bright CTA
shadcn/ui homepage

shadcn/ui

visit ↗

Brutalist Swiss grid in graphite

Style

Graphite Swiss minimal. Neutral grayscale, mono-ish labels, crisp components, zinc palette.

What sets it apart
  • Zinc/graphite neutral system
  • Component-grid showcase
  • Copy-paste code-first
  • Razor-clean default theme
Hero elements
  • Minimal mono headline
  • Component preview grid
  • Two text CTAs
Steep homepage

Soft dawn on a marble dashboard

Style

Soft-dawn data app. Pastel marble gradients, light dashboard cards, gentle pastel accents.

What sets it apart
  • Marble/pastel gradient surfaces
  • Soft data-card dashboard
  • Gentle pastel accents
Hero elements
  • Pastel gradient hero
  • Dashboard preview
  • Soft CTA
Sequel homepage

Sequel

visit ↗

Blackbox gallery, lit by cinema

Style

Cinematic dark. Near-black, dramatic spotlighting, cinematic imagery, high-contrast type.

What sets it apart
  • Cinematic spotlight lighting
  • Dramatic dark imagery
  • High-contrast display type
Hero elements
  • Dark cinematic hero
  • Spotlit product/video
  • Bright CTA
Dala homepage

Particle cosmos on a void — violet

Style

Cosmic void. Deep-space black, violet particle fields, glowing accents, futuristic sans.

What sets it apart
  • Violet particle/starfield bg
  • Glowing neon accents
  • Void-black canvas
Hero elements
  • Particle-cosmos hero
  • Glowing headline
  • Neon CTA
ORYZO AI homepage

ORYZO AI

visit ↗

Cork coaster in a blackout studio

Style

Blackout studio. Pure black, warm cork/tan accent, product-render centerpiece, minimal type.

What sets it apart
  • Blackout canvas + warm tan accent
  • Hero product render
  • Minimal label type
Hero elements
  • Blackout hero
  • Centered product render
  • Single tan CTA
monopo saigon — view live ↗

monopo saigon

visit ↗

Cinematic darkroom, floating type

Style

Studio-portfolio cinematic. Dark, kinetic floating typography, full-bleed video, experimental motion.

What sets it apart
  • Kinetic floating typography
  • Full-bleed video reels
  • Experimental scroll motion
  • Studio-portfolio bravado
Hero elements
  • Full-bleed video hero
  • Floating kinetic type
  • Scroll-cue
Geniestudio homepage

Geniestudio

visit ↗

Playful pastel sky, floating shapes

Style

Playful pastel. Sky pastel gradient, floating 3D shapes, rounded friendly type, bright accents.

What sets it apart
  • Floating 3D pastel shapes
  • Sky gradient canvas
  • Rounded playful type
Hero elements
  • Pastel sky hero
  • Floating 3D shapes
  • Bright rounded CTA
(dot)connect homepage

(dot)connect

visit ↗

Swiss engineering blueprint

Style

Blueprint Swiss. Technical grid, blueprint-blue accent, mono labels, precise diagrammatic layout.

What sets it apart
  • Blueprint grid + diagram motifs
  • Technical mono labels
  • Engineering-blue accent
Hero elements
  • Blueprint-grid hero
  • Diagrammatic product mock
  • Precise CTA