Thousands of GPU particles idle as a living wave — then gather into precise 3D forms as visitors scroll. A torus knot, a heart, your logo, your headline. Chain up to 6 shapes in one scroll. Custom shaders keep 20,000+ particles smooth, even on mobile.
Try it live: Interactive playground →
14 built-in 3D primitives + your own SVG, image, live text, or .glb model
True 3D Extrude — turn flat SVGs, logos or text into solid forms with adjustable depth
5 easings, 4 wave layouts, dual-color modes, additive glow, depth fade
Cursor push physics + camera parallax on hover
Editor tools: Scrub slider to preview any scroll moment on canvas, Freeze, Debug HUD
Performance-minded: DPR cap, pauses offscreen, respects reduced motion, deterministic seed
Drag MorphField onto your page.
Set Width: Fill and Height: ~300vh — the layer height is the scroll runway. Keep Scroll Dist ≤ layer height.
Pick a shape (or upload an SVG and switch Extrude to 3D).
Use the Scrub slider to design without scrolling, then hit Preview and scroll for the real effect.
The canvas shows a static frame by design — the live morph runs in Preview and on published sites.
Loads three.js (pinned) from esm.sh CDN at runtime.
Upload SVGs/images via the property panel pickers (external URLs need CORS).
Text shape uses fonts loaded on your page.
Use 1–2 instances per page (each is its own WebGL scene).
Thin SVG strokes looking sparse? Lower the Cutoff control.
Use cases: hero reveals, logo morphs, SaaS feature storytelling, launch pages, ambient wave backgrounds.
Built by TheWebheart Studio · Framer Experts · work@thewebheart.com
Questions or feature requests? Email us - we ship updates.
Thousands of GPU particles idle as a living wave — then gather into precise 3D forms as visitors scroll. A torus knot, a heart, your logo, your headline. Chain up to 6 shapes in one scroll. Custom shaders keep 20,000+ particles smooth, even on mobile.
Try it live: Interactive playground →
14 built-in 3D primitives + your own SVG, image, live text, or .glb model
True 3D Extrude — turn flat SVGs, logos or text into solid forms with adjustable depth
5 easings, 4 wave layouts, dual-color modes, additive glow, depth fade
Cursor push physics + camera parallax on hover
Editor tools: Scrub slider to preview any scroll moment on canvas, Freeze, Debug HUD
Performance-minded: DPR cap, pauses offscreen, respects reduced motion, deterministic seed
Drag MorphField onto your page.
Set Width: Fill and Height: ~300vh — the layer height is the scroll runway. Keep Scroll Dist ≤ layer height.
Pick a shape (or upload an SVG and switch Extrude to 3D).
Use the Scrub slider to design without scrolling, then hit Preview and scroll for the real effect.
The canvas shows a static frame by design — the live morph runs in Preview and on published sites.
Loads three.js (pinned) from esm.sh CDN at runtime.
Upload SVGs/images via the property panel pickers (external URLs need CORS).
Text shape uses fonts loaded on your page.
Use 1–2 instances per page (each is its own WebGL scene).
Thin SVG strokes looking sparse? Lower the Cutoff control.
Use cases: hero reveals, logo morphs, SaaS feature storytelling, launch pages, ambient wave backgrounds.
Built by TheWebheart Studio · Framer Experts · work@thewebheart.com
Questions or feature requests? Email us - we ship updates.
