Gravity Text Reveal

Gravity Text Reveal adds a layer of organic motion to your site, letting stylish blocks fall away to reveal your message. As users scroll or when the element enters the viewport, each word or line is unveiled with a natural gravity-based animation. With deep customization for physics, rotation, and block styling, it’s perfect for high-impact headlines, hero sections, or any content that needs a tactile, modern feel.

Key Features

• Dynamic Physics Animation: Blocks fall naturally to reveal text.

• Word or Line Reveal: Choose how your message is unveiled.

• Advanced Motion Control: Adjust gravity speed, stagger, and rotation.

• Stylized Reveal Blocks: Customize block colors, padding, and corner radius.

• Full Typography Control: Total flexibility over fonts, spacing, and alignment.

• Responsive & High Performance: Smooth animations across all devices.

Properties

Text Content

• Type: Text Area

• Default: "Create amazing animations with gravity effects"

• Description: The text that will be animated. Depending on your settings, it reveals by word or by line.

Styling Properties

• Show Blocks in Preview: Toggle to visualize the reveal blocks directly in the Framer canvas.

• Font: Choose the font family for your text. Supports all project fonts.

• Text Align: Controls the alignment (Left, Center, Right) of the text.

• Spacing: Independent sliders for Word Spacing and Line Spacing.

• Colors: Individual pickers for Text Color and the falling Block Color.

• Block Padding: Adjust the size of the blocks without affecting font layout.

• Corner Radius: Smooth out the edges of your reveal blocks for a softer look.

Physics & Animation

• Gravity Speed: Controls how fast the blocks fall off the screen.

• Stagger Time: Defines the delay between each block’s fall, creating a cascading effect.

• Enable Rotation: Toggle to add a realistic "tumble" effect as blocks fall.

• Rotation Variation: Sets the maximum degree of random rotation for each block.

Best Practices

• Stagger Timing: Use a low stagger (0.08s–0.1s) for long sentences to keep the reveal snappy.

• Rotation: Enable rotation with a variation of 70–120deg for a more organic, "paper-fall" feel.

• Contrast: Use a vibrant Block Color against a contrasting background to make the animation pop.

Support & Assistance

If you have any questions, need help using the component, or encounter any issues, you can reach out to me at danielgrafix12@gmail.com. I’ll get back to you as soon as possible.