Theme
Dither0.40

SpotYourSite

Every UI/UX element

A live sample of every component family we can build — navbars, glass, buttons, cards, brutalist, forms, feedback, effects. Hit a color (top-right) and watch all of it recolor at once.

Glass Materials

Base glass

blur 20px, white 7%

Heavy frost

blur 40px, saturate

Dark glass

modals/overlays

Accent glass

tinted by --accent

Buttons

Button Shapes & Styles

Shapes

2D · 3D · Depth

Aesthetic styles

Effects & overlays (hover)

Premium Interactions

Apple-elegant micro-interactions on one shared spring. Hover / tap / focus the live ones; the rest are labeled.

Elastic Number Roll

stats
0

jobs done · springs past + settles

Tactile Toggle

pricing

Spring Accordion

services

Magnetic Snap-Rail

nav

Proximity Glow

pricing/gallery
1
2
3
4
5
6

Field-Settling Validation

forms

Enter a valid email — guidance, not punishment.

Success Choreography

booking

Sticky Step Ribbon

quote wizard
✓
2
3

Inertial Drag Gallery

gallery
1
2
3
4
5
6
7
8

Velocity-Aware Reveal

services

fast scroll = tight fade; slow = cinematic blur-rise

Pinned Comparison Wipe

hero

scroll-scrubbed clip-path: problem → fixed

Live Availability Pulse

booking

breathing 'next slot' chip, urgency shimmer

Focus-Visible Spotlight

global a11y

one ring springs between focused elements (keyboard)

Receipt-Tape Summary

pricing

line items print in on thermal-paper, total digit-rolls

Ambient Parallax Depth

hero

2-3 layers drift on scroll + tilt, 4-12px max

Skeleton-to-Content Morph

reviews

skeleton bars morph into real content, no pop

Cards & Layout

Bento hero

mixed-size CSS-grid tiles

Tile

Accent

Wide tile

Tilt 01

Cursor-reactive 3D + glare.

Tilt 02

Accent glow on hover.

Tilt 03

translateZ depth layer.

Brutalist / Neobrutalist

Raw output

Hard border, offset shadow, no radius.

CRT mode

Phosphor on black.

Forms & Inputs

Chip Outline chip Alert

Feedback

✅

Success toast

ℹ️

Info banner

Progress72%
Loading…
Accordion ▾

Expandable content.

Effects & Texture

Background / surface effects. The dither slider (top-right) drives the grain on every dither-overlay tile below.

Grainy gradient
← drag dither

Aurora mesh

Border beam

Diagonal stripes

Dot grid

Spotlight (hover)

Conic sweep

CRT scanlines

Blueprint grid

Motion & pattern vocabulary

The named effects we can build per site (from the design-taste reference). Hover the live ones.

Text shimmer
Kinetic spacing
Magnetic lift
Directional hover →
Bento grid
Masonry
Parallax tilt
Spotlight card
Holographic foil
Sticky-stack scroll
Horizontal scroll-hijack
Zoom parallax
Scroll progress path
Coverflow carousel
Dome gallery
Hover image trail
Glitch image
Text mask reveal
Circular text path
Gradient stroke
Particle burst
Ripple click
Skeleton shimmer
SVG line draw
Mesh gradient
Lens blur depth
Marquee
Curtain reveal
Liquid swipe
Gooey menu
Dynamic island
Speed dial