---
title: "MorphField Particle — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Thewebheart Studio · Text. Custom SVG 3D Particle effect"
canonical: "https://framer.elliotli.dev/component/morphfield-particle"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/MorphField Particle

# MorphField Particle

Custom SVG 3D Particle effect

[View on Framer](https://framer.com/marketplace/components/morphfield-particle/?via=elliot-li)

![MorphField Particle preview image 1](https://framer.elliotli.dev/og/component/morphfield-particle/b67eb7b5933b1a89/1600x1200.jpg)

## Summary

Custom SVG 3D Particle effect

## Description

## **MorphField — 3D Particle Scroll Morph**

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 →](https://3d-morph-pro.framer.website/featured)

### **Features**

-   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
    

### **How to use**

1.  Drag MorphField onto your page.
    
2.  **Set Width: Fill and Height: ~300vh** — the layer height is the scroll runway. Keep Scroll Dist ≤ layer height.
    
3.  Pick a shape (or upload an SVG and switch Extrude to 3D).
    
4.  Use the Scrub slider to design without scrolling, then hit Preview and scroll for the real effect.
    

### **Good to know**

-   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](http://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](mailto:work@thewebheart.com)

Questions or feature requests? Email us - we ship updates.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2474

## Details

- **Author**: Thewebheart Studio
- **Price**: $10.00
- **Published**: 2026-07-26
- **Updated**: 2026-07-28
- **Added**: 2026-07-26
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing