Gravity Text Hero A mouse-reactive 3D text hero for Framer — Made by Ava Moosaei
How it works The component renders large display text onto a high-density 3D plane using Three.js. A custom vertex shader warps the mesh toward the viewer wherever your cursor moves, creating a magnetic gravity pull effect. A shadow layer fades near the cursor for depth. A custom terracotta cursor (dot + lagging ring) replaces the default pointer.
Features — Mouse-proximity vertex displacement via GLSL shader — Shadow mesh that fades near cursor for depth — Custom cursor: snapping dot + lagging ring in terracotta — Two-line text with DM Serif Display font rendered via Canvas 2D — Parchment background (#f5f0e8) with ink text (#1a1a1a) — Orthographic Three.js camera for a cinematic flat-perspective look — Fully self-contained — loads Three.js from CDN automatically — No dependencies to install
Property controls Line 1 · Line 2 · Background Color · Text Color
Gravity Text Hero A mouse-reactive 3D text hero for Framer — Made by Ava Moosaei
How it works The component renders large display text onto a high-density 3D plane using Three.js. A custom vertex shader warps the mesh toward the viewer wherever your cursor moves, creating a magnetic gravity pull effect. A shadow layer fades near the cursor for depth. A custom terracotta cursor (dot + lagging ring) replaces the default pointer.
Features — Mouse-proximity vertex displacement via GLSL shader — Shadow mesh that fades near cursor for depth — Custom cursor: snapping dot + lagging ring in terracotta — Two-line text with DM Serif Display font rendered via Canvas 2D — Parchment background (#f5f0e8) with ink text (#1a1a1a) — Orthographic Three.js camera for a cinematic flat-perspective look — Fully self-contained — loads Three.js from CDN automatically — No dependencies to install
Property controls Line 1 · Line 2 · Background Color · Text Color
