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.
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)
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.
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.
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.
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.
Drop the component onto your canvas and set your text in the Content field.
Choose a playback mode under Playback → Mode.
Open 3D Path Settings and adjust Start X, Y, Z.
Tweak Initial Rotation — Adjust Rotate X, Y, Z to see the flip effect.
Use Motion Feel → Stagger Gap to control how much the letters spread across time. Higher = more cascade, lower = more simultaneous.
Publish and enjoy.
Evixel Studio
