Spot Your Site · Parts Kit

THE
ELEMENT
CATALOG

Twenty-four numbered web elements. Every one rendered live below. Note the numbers. Hand us a list — "build it with 3, 7, 12, 19" — and get a site.

A · BackgroundsB · Motion & ScrollC · PointerD · Text EffectsE · Audio & 3DF · Widgets
01
Group A

Dither Field

Live ordered-dither animated background field.

DITHER
FIELD Ordered Bayer 4×4 · canvas
02
Group A

Aurora Gradient

Slow drifting animated mesh-gradient backdrop.

AURORA Drifting radial mesh · CSS keyframes
03
Group A

Particle Field

Constellation canvas of points with near-neighbour links.

PARTICLE
FIELD Constellation · near-neighbour links
04
Group A

Grain Noise

Animated film-grain and noise texture overlay.

GRAIN Film-grain overlay · ~12 fps redraw
05
Group B

Scroll Reveal

Clip-path wipe reveal triggered on scroll-in.

BUILT
TO BE
SEEN

Each line wipes in via clip-path when it enters the viewport.

06
Group B

Scroll Assemble

Scattered fragments converge into place as you scroll.

AS SEM BL ED

Scroll — scattered fragments converge into the word.

07
Group B

Parallax Layers

Three depth layers moving at different scroll speeds.

PARALLAX Three layers · three scroll speeds
08
Group B

Scroll Scrub

Counter and progress bar scrubbed by scroll position.

000 Scrub — the counter + bar track this section's scroll progress
STARTQUARTER HALFEND
09
Group B

Sticky Pin

Section pins to the viewport while inner steps advance.

01 PIN

The panel locks to the viewport.

02 STEP

Inner content advances as you scroll.

03 RELEASE

The section lets go and scroll resumes.

10
Group C

Custom Cursor

Replaced cursor dot with an eased trailing ring.

MOVE
INSIDE Dot snaps · ring eases · hidden on touch
11
Group C

Magnetic

Buttons pulled toward the cursor within a radius.

Hover near a button — it leans toward your cursor.

12
Group C

Hover Zoom

Image zoom with sibling rack-focus blur on hover.

Hover a tile — it zooms; siblings rack-focus to blur.

13
Group C

Cursor Spotlight

Radial mask follows the cursor, revealing a hidden layer.

Move the cursor — a spotlight uncovers the layer below.
14
Group D

Glitch Text

RGB-split glitch headline with clip jitter.

MALFUNCTION

RGB-split layers · clip-jitter keyframes
15
Group D

Scramble Decode

Characters scramble then resolve on scroll-in.

DECODED ON ARRIVAL

characters resolve as the section enters view

16
Group D

Variable-Font Morph

Variable-font weight morph on hover and scroll.

VARIABLE

WEIGHT FOLLOWS SCROLL

Inter Variable · wght axis on hover + scroll
17
Group D

Stencil Reveal

Spray-stencil mask wipe revealing text on scroll-in.

STENCIL
SVG spray-stencil mask · wipes on scroll-in
18
Group E

Audio Reactive

Web-Audio analyser drives a live FFT visualizer.

REACTIVE Synth loop · FFT bars + ring · UI pulses to bass
19
Group E

WebGL Displace

WebGL displacement shader with a hover ripple.

DISPLACE Hover ripple · WebGL fragment shader
20
Group E

Tilt 3D

Layered CSS-3D object tilting toward the pointer.

3D
Layered planes tilt in CSS 3D toward the cursor.
21
Group F

Tilt Card

Pointer-tracked 3D tilt card with a moving glare.

Membership · 01

FOUNDER
PASS

Unlimited access. Priced for the first hundred only.

$49/mo
Hover the card — it tilts in 3D with a moving glare.
22
Group F

Count Up

Numbers count up when scrolled into view.

0 Projects shipped
0 Hours billed
0 Client retention
23
Group F

Marquee

Infinite seamless marquee strip, pauses on hover.

DESIGNBUILDSHIPREPEAT★NO TEMPLATESONLY ELEMENTS★
DESIGNBUILDSHIPREPEAT★NO TEMPLATESONLY ELEMENTS★
24
Group F

Bento Grid

Responsive bento layout with varied tile sizes.

01

Lead feature

The big tile carries the headline story.

02

Stat

Compact metric.

03

Quote

A short pull line.

04

Gallery

A taller column for imagery.

05

Link

A call to action.

06

Footer band

A wide closing tile.