--- title: "Bezier Text 3D — Framer component · Best of Framer" description: "$7.00 · Framer component · by Evixel Studio · Text. 3D Bezier path text scroll animation" canonical: "https://framer.elliotli.dev/component/bezier-text-3d" --- [Home](/)/[Components](/components)/[Text](/components/category/text)/Bezier Text 3D # Bezier Text 3D Cinematic 3D kinetic text reveals [View on Framer](https://framer.com/marketplace/components/bezier-text-3d/?via=elliot-li) ![Bezier Text 3D preview image 1](https://framer.elliotli.dev/og/component/bezier-text-3d/047b0f25056aa3b9/1600x1200.jpg) ## Summary 3D Bezier path text scroll animation ## Description BezierText 3D brings cinematic letter-by-letter animation to Framer without writing a single line of code. Each character travels along a quadratic Bezier path through 3D space, staggering into place with spring physics. You control where letters start, how they curve through the air, what angle they spin from, and whether the whole thing plays on scroll or on a timer. ### Features - Two playback modes — scroll-driven (fixed px range) or time-based (on load or in view) - Full 3D Bezier path per letter: Start X/Y/Z + Curve X/Y/Z - Per-axis initial rotation: Rotate X, Y, Z - Spring physics with adjustable stiffness and damping - Stagger gap control for how spread-out the letter cascade feels - "Complete at page end" safety — forces completion when scroll room runs out - InView trigger with customizable threshold and pixel offset - Replay or once-only mode - Full typography control (font, size, weight, color, alignment) ### Understanding the 3D Path Controls This is the heart of the component. Three groups of numbers work together to shape each letter's entrance. Think of it like placing a ball at one point in 3D space and defining the arc it takes to reach its final position. **Start X / Y / Z — where each letter begins** - **Start X**: How far left or right letters originate. Negative = from the left, positive = from the right. - **Start Y**: How far above or below. Positive = letters rise up from below, negative = they fall from above. - **Start Z**: Depth behind or in front of the screen. Negative values push letters deep behind the screen so they fly toward you — this is the main control for that "coming out of the screen" feel. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rs4blmh7-LCLnMmiOq8jCD7D8QvgFsqMVH4sMwd) **Curve Offset X / Y / Z — the arc shape mid-flight** These are not a second destination — they're the "pull" point in the middle of the journey, like gravity bending a thrown ball. - **Curve X**: How much the path bends sideways before landing. - **Curve Y**: Negative = letters arc upward mid-flight before settling, positive = they dip downward. - **Curve Z**: Positive = letters briefly overshoot forward before snapping back to rest. Adds a punchy feel. A quick mental model: imagine the letter starts at (StartX, StartY, StartZ), gets pulled toward (CurveX, CurveY, CurveZ) in the middle, then lands at (0, 0, 0). The Bezier curve is just the smooth path between those three points. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rs4blmh7-vkjVzbgbvqtGuwPnIuSiMtA4NzsMdW) **Rotate X / Y / Z — the spin at the start** Each letter begins at these rotation angles and unwinds to 0 as it arrives. - **Rotate X**: Tips letters forward or backward (like nodding). Default 65° gives a strong forward tilt. - **Rotate Y**: Spins around the vertical axis (like a door swinging open). Adds a flip-in feel. - **Rotate Z**: Rolls the letter clockwise or counter-clockwise on entry. Subtle twist effect. These work independently — mix all three for complex tumbling entrances, or zero them out for a pure positional fly-in. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rs4blmh7-RKPQJiRqQKJ7Q3BRyZ55NcoFX8k41h) ### Playback Modes **Scroll (Fixed Range)** — The animation plays as the user scrolls. Set how many pixels the full animation spans, and at what viewport percentage it begins. Enable "Complete at End" so content near the page bottom always finishes animating. **Time** — Plays automatically, either on page load or when the component enters the viewport. Set duration, delay, and whether it replays when scrolled back into view. ### Quick Start 1. Drop the component onto your canvas and set your text in the **Content** field. 2. Choose a playback mode under **Playback → Mode**. 3. Open **3D Path Settings** and adjust Start X, Y, Z. 4. Tweak **Initial Rotation** — Adjust Rotate X, Y, Z to see the flip effect. 5. Use **Motion Feel → Stagger Gap** to control how much the letters spread across time. Higher = more cascade, lower = more simultaneous. 6. Publish and enjoy. ## Rank history [How rankings work →](/terms#rankings) - All · #10553 ## Details - **Author**: Evixel Studio - **Price**: $7.00 - **Published**: 2026-04-16 - **Updated**: 2026-09-19 - **Added**: 2026-04-14 - **Categories**: Text ## More like this - [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable - [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing - [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters - [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos