Awesome Web Effects

See the interaction. Learn its name. Copy the code or agent prompt.

A visual atlas for the moment when you know the feeling you want, but not the words to describe the effect.

Open the live visual catalog · Language metadata

_{English · 简体中文 · हिन्दी · Español · العربية · Français · বাংলা · Português · Bahasa Indonesia · اردو · Русский · Deutsch · 日本語 · Naijá · العربي المصري · मराठी · Tiếng Việt · తెలుగు · Kiswahili · Hausa}

14 recommended effects — every preview a real capture

_{Pinned horizontal scroll scene Scroll & reveal · 96/100}	_{Semantic prompt revision workspace Text & SVG · 100/100}	_{Staggered transform choreography Motion & choreography · 92/100}
_{Motion-graphics burst Motion & choreography · 92/100}	_{Visually authored keyframe sequence Motion & choreography · 84/100}	_{Compact SVG shape tween Motion & choreography · 89/100}
_{Filterable grid reflow Page & layout · 85/100}	_{Perspective tilt and glare Pointer & hover · 90/100}	_{Context-aware custom cursor Pointer & hover · 86/100}
_{Displacement-map image hover Pointer & hover · 90/100}	_{SVG stroke drawing Text & SVG · 86/100}	_{Human-released DOM-avoiding fish school Canvas & 2D · 100/100}
_{Stage haze colour lab 3D & WebGL · 99/100}	_{Human-calibrated DOM / GPU media registration 3D & WebGL · 100/100}

Explore all 152 live effects →

Use with any coding agent in one prompt

No skill or installation is required. Copy this single sentence into Codex, Claude Code, or another coding agent while your target project is open.

Review the current project using https://giraffe-tree.github.io/awesome-web-effects/ as read-only inspiration. Pick one effect suited to the product and stack. Inspect its verified demo and minimal code; define 2–3 observable acceptance criteria, then adapt it with original assets, preserving responsive, keyboard, pointer, touch, prefers-reduced-motion, performance, and cleanup. Run tests and desktop/mobile browser checks. Report the effect URL, changed files, evidence per criterion, and remaining risks.

Copy the one-line prompt on the live site →

See it. Name it. Build it.

152
_{admitted effects}

152
_{real videos}

150
_{runnable demos}

80/100
_{minimum score}

① Find by sight
_{Scan real motion instead of guessing library names.}

② Open the effect
_{Check the score, source, behavior and minimal implementation.}

③ Ship the idea
_{Copy code or a scoped prompt for Codex / Claude Code.}

This is an effect-first, curator-reviewed reference—not another repository list. Every published item has visible evidence, a score of at least 80/100, provenance, reusable code and a runnable or official preview.

Browse by visual family

Category	Effects	Source projects	Visible result
Motion & choreography	18	7	Timelines, springs, tweens, class animation, and framework-native motion.
Scroll & reveal	13	3	Smooth scrolling, scroll-linked scenes, reveals, parallax, and snap navigation.
Page & layout	13	4	Page transitions, FLIP motion, filtering, packing, and animated reflow.
Pointer & hover	25	6	Tilt, depth, custom cursors, magnetic motion, and image distortion.
Text & SVG	24	3	Typing, text splitting, vector drawing, handwriting, and SVG morphing.
Canvas & 2D	44	3	Scene graphs, creative coding, physics, drawing tools, and 2D renderers.
3D & WebGL	15	4	3D engines, declarative renderers, shader layers, and post-processing.

Open the complete 152-effect index — implementation, score, source and direct link

Motion & choreography

Timelines, springs, tweens, class animation, and framework-native motion.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
Connected fragment story stage	Motion	95/100	Anthropic	32,819	1	Recommended	Score + code + prompt
Shared-layout spring morph	Motion	94/100	—	32,819	1	Recommended	Score + code + prompt
Staggered transform choreography	Anime.js	92/100	Factory Read AI Cursor (Anysphere)	71,056	1	Recommended	Score + code + prompt
Motion-graphics burst	Mo.js	92/100	—	18,728	1	Recommended	Score + code + prompt
Visually authored keyframe sequence	Theatre.js	84/100	—	12,541	1	Recommended	Score + code + prompt
Compact SVG shape tween	KUTE.js	89/100	—	2,639	1	Recommended	Score + code + prompt
Named-agent artifact handoff	Motion	100/100	InVideo	32,819	1	Recommended	Score + code + prompt
Duration-aware hero film handoff	Motion	94/100	Kling	32,819	1	Recommended	Score + code + prompt
Hover-rehearsed video style rail	Motion	95/100	Captions	32,819	1	Recommended	Score + code + prompt
Device-silhouette masked video	Motion	92/100	Pika	32,819	1	Recommended	Score + code + prompt
Blurred autoplay video ambience	Motion	91/100	Replicate	32,819	1	Recommended	Score + code + prompt
Visibility-gated agent terminal replay	Motion	93/100	Poolside	32,819	1	Recommended	Score + code + prompt
Held-input room-scene assistant	Motion	94/100	—	32,819	1	Recommended	Score + code + prompt
Human-retained image-pixel atmosphere	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
BlurHash-to-photo progressive reveal	p5.js	88/100	—	23,797	1	Recommended	Score + code + prompt
Harbor Arts folding route map	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Harbor Hall seat-release proof	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Particle text morph assembly	GSAP	94/100	—	26,600	1	Recommended	Score + code + prompt

Scroll & reveal

Smooth scrolling, scroll-linked scenes, reveals, parallax, and snap navigation.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
Pinned horizontal scroll scene	GSAP	96/100	—	26,600	1	Recommended	Score + code + prompt
Scroll-linked observatory field guide	p5.js	94/100	Fathom	23,797	1	Recommended	Score + code + prompt
Contrast-aware fixed navigation reader	Motion	100/100	Luma AI	32,819	1	Recommended	Score + code + prompt
Scroll-scrubbed document generation playback	Motion	97/100	Granola	32,819	1	Recommended	Score + code + prompt
Inertial vertical capability rail	Motion	91/100	Augmentcode	32,819	1	Recommended	Score + code + prompt
DOM-to-spatial-artifact registration	Motion	95/100	—	32,819	1	Recommended	Score + code + prompt
Incident review card stack	Motion	99/100	—	32,819	1	Recommended	Score + code + prompt
Metrobrief arrival velocity board	Motion	99/100	—	32,819	1	Recommended	Score + code + prompt
Human-scrubbed field-note conclusion	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-reviewed sticky research evidence	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-scrubbed greenhouse growth study	p5.js	99/100	Motion	23,797	1	Recommended	Score + code + prompt
North Spur field-node commissioning	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Paper-cut layered parallax	GSAP	93/100	—	26,600	1	Recommended	Score + code + prompt

Page & layout

Page transitions, FLIP motion, filtering, packing, and animated reflow.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
Filterable grid reflow	Isotope	85/100	Ideogram	11,103	1	Legacy	Score + code + prompt
Synchronized scenario scene handoff	Motion	98/100	Vapi	32,819	1	Recommended	Score + code + prompt
Delayed dropdown promo sweep	Motion	92/100	Glean	32,819	1	Recommended	Score + code + prompt
Cultural-program full-scene wipe	Motion	90/100	—	32,819	1	Recommended	Score + code + prompt
Semantic field-dispatch pixel dissolve	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-opened field atlas bubble navigation	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-routed NORTH/COMMON editorial index	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Origin-aware functional reader-mode reveal	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Northline project evidence constellation	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Tidal Gallery accordion proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Northline depth clearance	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Analog film photo dissolve	regl	93/100	—	5,557	1	Recommended	Score + code + prompt
Breathing editorial whitespace	Motion	93/100	—	32,819	1	Recommended	Score + code + prompt

Pointer & hover

Tilt, depth, custom cursors, magnetic motion, and image distortion.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
Perspective tilt and glare	vanilla-tilt.js	90/100	—	4,019	1	Recommended	Score + code + prompt
Context-aware custom cursor	mouse-follower	86/100	—	818	1	Recommended	Score + code + prompt
Displacement-map image hover	hover-effect	90/100	—	1,874	1	Recommended	Score + code + prompt
Four-corner hover crop marks	Motion	92/100	Cognition	32,819	1	Recommended	Score + code + prompt
Human-built role-interest hiring memory	Motion	100/100	Clay	32,819	1	Recommended	Score + code + prompt
Research-card baseline role handoff	Motion	91/100	Together	32,819	1	Recommended	Score + code + prompt
Human-registered edition reservation CTA	Motion	100/100	Unstructured	32,819	1	Recommended	Score + code + prompt
Return-visit reward minesweeper	Motion	90/100	Tavus	32,819	1	Recommended	Score + code + prompt
Distance-weighted design tool dock	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-retained pixel-driven destination rail	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Release-velocity rental discovery stack	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Metaball product-finish target cursor	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Field Edit visual-memory trace	p5.js	99/100	—	23,797	1	Recommended	Score + code + prompt
Human-routed gooey signal matrix	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-confirmed pixel-evidenced defect reticle	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-confirmed cell-distance diagnostic	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
North Atlantic iris navigation	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Material weave specification proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Terminal apron crowd-clearance route test	p5.js	100/100	Natureofcode	23,797	1	Recommended	Score + code + prompt
Harbor pixel command dock	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Night Garden ticket access peel	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Pressing surface liquid-lens inspection	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Gesture sliced image shutters	Motion	96/100	—	32,819	1	Recommended	Score + code + prompt
Halftone resolution reveal	p5.js	93/100	—	23,797	1	Recommended	Score + code + prompt
Holographic foil card tilt	Anime.js	93/100	—	71,056	1	Recommended	Score + code + prompt

Text & SVG

Typing, text splitting, vector drawing, handwriting, and SVG morphing.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
SVG stroke drawing	Vivus	86/100	—	15,479	1	Legacy	Score + code + prompt
Semantic prompt revision workspace	Motion	100/100	Granola	32,819	1	Recommended	Score + code + prompt
Human-approved headline revision marker	Motion	100/100	PolyAI	32,819	1	Recommended	Score + code + prompt
Human-routed curved wayfinding ribbons	Motion	100/100	Wispr Flow	32,819	1	Recommended	Score + code + prompt
Live-bounds seminar annotation	Motion	90/100	—	32,819	1	Recommended	Score + code + prompt
Fresh-formula gooey blend action	Motion	93/100	—	32,819	1	Recommended	Score + code + prompt
Human-confirmed AI graph payload	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-routed DOM file-processing beam	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Human-pinned release dependency analysis	p5.js	100/100	D3js	23,797	1	Recommended	Score + code + prompt
Human-reviewed Voronoi air-sensor attribution	p5.js	100/100	D3js	23,797	1	Recommended	Score + code + prompt
Human-retained bearing anomaly brush review	p5.js	100/100	D3js	23,797	1	Recommended	Score + code + prompt
Human-reviewed repository hierarchy	Motion	100/100	D3js	32,819	1	Recommended	Score + code + prompt
WAYFIND elastic-baseline legibility proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-tuned liquid chrome proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Editorial version-proof time slit	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Four-ink kinetic title tension proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Make-ready print registration gate	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
TIDE rope wayfinding material proof	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Northlight studio quiet-hour finder	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Reclaim material stream separation	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
North Quay wayfinding type fit	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Northpass cold-chain route check	Motion	100/100	—	32,819	1	Recommended	Score + code + prompt
Ink-wash brush writing	p5.js	95/100	—	23,797	1	Recommended	Score + code + prompt
Kinetic ring typography orbit	Motion	94/100	—	32,819	1	Recommended	Score + code + prompt

Canvas & 2D

Scene graphs, creative coding, physics, drawing tools, and 2D renderers.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
Sketch-style creative coding loop	p5.js	91/100	Hume AI	23,797	1	Recommended	Score + code + prompt
Depth-layer ordered blur dissolve	p5.js	96/100	Black Forest Labs	23,797	1	Recommended	Score + code + prompt
Human-released DOM-avoiding fish school	p5.js	100/100	Sakana AI	23,797	1	Recommended	Score + code + prompt
Operator-triggered staggered telemetry preflight	p5.js	100/100	Pinecone	23,797	1	Recommended	Score + code + prompt
ASCII incident route trace	p5.js	94/100	Augmentcode	23,797	1	Recommended	Score + code + prompt
Architectural refraction QA probe	regl	93/100	—	5,557	1	Recommended	Score + code + prompt
Image-backed festival poster review table	p5.js	98/100	—	23,797	1	Recommended	Score + code + prompt
Generative corolla sleeve director	p5.js	95/100	—	23,797	1	Recommended	Score + code + prompt
Bounded colony relationship sandbox	p5.js	98/100	—	23,797	1	Recommended	Score + code + prompt
Human-retained finite podcast trim	p5.js	98/100	—	23,797	1	Recommended	Score + code + prompt
Human-kept cold-room telemetry window	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-signed velocity-ink contract	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-pressure packaging proof marks	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-applied checkout easing curve	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Hand rehabilitation landmark calibration	p5.js	98/100	—	23,797	1	Recommended	Score + code + prompt
Occlusion Check GIF frame inspector	p5.js	99/100	Developer	23,797	1	Recommended	Score + code + prompt
Magnetic media recovery	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Storm Port human thermal inspection	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Optical-channel Moiré calibration	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Make-ready kinetic letterpress	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Coastal canopy regeneration transect	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Biomaterial culture boundary assay	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Harbor risk relationship probe	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Coastal emergency relay mesh planner	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Coastal watershed quadtree focus review	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
North Atlantic passage current routing	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Composite laminate Delaunay inspection	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Acoustic daylight window finder	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Ridge 12 slope load cell	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Nocturne right-of-way clearance	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Mizu Press marbling proof	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Alpine watershed flood-contour review	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Phase Atlas thermal crystallization probe	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Low Tide release particle compositor	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-reviewed offline sound fingerprint	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Deep Field gravity lens inspector	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
North Relay pixel-sort inspection	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
North Roof recovery field lab	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Hydro optical material reader	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
North Spur night-route calibration	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Coastscan restoration evidence field	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Chromatic channel drag portrait	p5.js	95/100	—	23,797	1	Recommended	Score + code + prompt
Wrapping-print folding sampler	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Stained glass light crescendo	Anime.js	94/100	—	71,056	1	Recommended	Score + code + prompt

3D & WebGL

3D engines, declarative renderers, shader layers, and post-processing.

Effect	Recommended implementation	Curatorial score	AI homepage references (max 3)	Stars	Implementations	Status	Implementation
ETOPO topographic relief globe	Three.js	98/100	—	114,000	1	Recommended	Score + code + prompt
Functional WebGL draw commands	regl	96/100	—	5,557	1	Recommended	Score + code + prompt
Human-calibrated DOM / GPU media registration	Curtains.js	100/100	—	1,823	1	Recommended	Score + code + prompt
Nearest-edge dot-matrix globe	p5.js	93/100	—	23,797	1	Recommended	Score + code + prompt
Stage haze colour lab	regl	99/100	—	5,557	1	Recommended	Score + code + prompt
FBL-06 field beacon exploded inspection	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Parcel impact calibration stack	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Glass under light optical material review	p5.js	99/100	—	23,797	1	Recommended	Score + code + prompt
Human-kept harbor venue fly-to	p5.js	95/100	—	23,797	1	Recommended	Score + code + prompt
Human-retained civic load columns	p5.js	97/100	—	23,797	1	Recommended	Score + code + prompt
Aural Forms ordered phrase orbit	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Human-stamped digital-twin surface inspection	p5.js	100/100	—	23,797	1	Recommended	Score + code + prompt
Tidal Archive film review	p5.js	99/100	—	23,797	1	Recommended	Score + code + prompt
Bio-Material Futures dome review	p5.js	99/100	—	23,797	1	Recommended	Score + code + prompt
Aurora curtain drift	regl	92/100	—	5,557	1	Recommended	Score + code + prompt

Why the catalog is effect-first

Effect is the catalog key. Search, anchors, categories and examples begin with what the user sees—not the repository name.
Projects are implementation sources. One project may power several distinct effects; 5 source projects currently demonstrate this relation.
Alternatives stay together. Multiple implementations belong inside one effect instead of duplicating rows.
Deduplication is visual and behavioral. Candidates are compared by trigger, visible change, timing and page layer.

Curation, provenance and audit numbers

408 candidates audited: 152 admitted, 256 rejected.
152 verified previews: 2 official captures and 150 captures from runnable local demos; 0 missing.
Human review scores creativity, art direction, motion craft, legibility, creative transfer and evidence quality.
Admission requires 80/100 plus core-dimension minimums. Popularity never overrides the gate.
The verified H.264 MP4 set is 16.45 MiB, plus 2.69 MiB of static WebP posters; every preview is 640×360, silent, yuv420p, 5.8–7.3 seconds and below 2 MiB.
Stars are a 2026-07-30 snapshot. Recommendation sources and observed AI homepages remain separate relationships.

Read the current 408-candidate admission audit, the 100-company homepage research, and the preview provenance manifest.

Run the visual catalog locally

The demo is dependency-free static HTML, CSS, JavaScript modules, verified H.264 MP4 previews, and static WebP posters. It supports 20 localized UI locales, effect search, category filtering, score sorting, stable effect anchors, visible score breakdowns, real mobile previews, expandable source details, copyable minimal code, and one-click prompts for coding agents.

python3 -m http.server 4173 --directory demo

Open http://localhost:4173. A local HTTP server is required because the catalog is loaded as an ES module.

Real preview capture and encoding

First build a runnable, reusable HTML demo in demo/preview-demos/ and verify that it uses the named implementation. Capture the running browser output, then encode the verified frames as silent H.264 MP4 plus a static WebP poster:

npm ci --prefix demo/preview-demos
npm run build --prefix demo/preview-demos
python3 scripts/capture-real-preview-videos.py --built --skip-install
python3 scripts/transcode-official-preview-videos.py

The capture step records the real local demo; the official-media transcode step only processes source-verified assets. The validator uses ffprobe to check provenance, demo and media existence, H.264, 640×360 dimensions, yuv420p, no audio, 5.8–7.3 second duration, static WebP posters, exact hashes, perceptual similarity, and file-size budgets. If a source has neither a verified official asset nor a runnable captured demo, leave it unavailable.

See the preview authenticity migration report and the machine-readable preview provenance manifest.

GitHub Pages

The demo is fully static and uses only relative paths. The included workflow publishes demo/ on pushes to main and supports manual runs. Before the first deployment, set Settings → Pages → Source to GitHub Actions. See the deployment notes.

Expected project URL: https://giraffe-tree.github.io/awesome-web-effects/

Maintaining the catalog

Add only curator-approved records to demo/data/effects.js; rejected candidates belong in the dated admission audit, not the release catalog.
Store the score and six dimension values on every published effect and update demo/data/demo-admission.js when the policy changes.
Keep effect.id semantic and stable; never derive it from a repository name.
Reusing a project across effects is valid. Add alternative implementations to an effect's sources array.
Keep snippets and previews on the source relation, not on the project or effect root.
Run node scripts/build-docs.mjs to regenerate all localized README files and the language metadata document.
Run node scripts/validate.mjs before committing.

_{Preview media and project names are used for research, indexing, and comparison. Rights remain with their respective authors.}

Join the AwesomeWebEffects WeChat user group

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
demo		demo
docs		docs
languages		languages
research		research
scripts		scripts
social/xiaohongshu/awesome-web-effects		social/xiaohongshu/awesome-web-effects
.gitattributes		.gitattributes
.gitignore		.gitignore
AGENTS.md		AGENTS.md
README.md		README.md

Navigation Menu

Repository files navigation

Awesome Web Effects

14 recommended effects — every preview a real capture

Use with any coding agent in one prompt

See it. Name it. Build it.

Browse by visual family

Motion & choreography

Scroll & reveal

Page & layout

Pointer & hover

Text & SVG

Canvas & 2D

3D & WebGL

Run the visual catalog locally

Real preview capture and encoding

GitHub Pages

Maintaining the catalog

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Awesome Web Effects

14 recommended effects — every preview a real capture

Use with any coding agent in one prompt

See it. Name it. Build it.

Browse by visual family

Motion & choreography

Scroll & reveal

Page & layout

Pointer & hover

Text & SVG

Canvas & 2D

3D & WebGL

Run the visual catalog locally

Real preview capture and encoding

GitHub Pages

Maintaining the catalog

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages