ReflectiveText

Show Preview
ReflectiveText

About ReflectiveText

Overview

Transform static headlines into high-end design elements. This component creates a live, SEO-friendly mirror reflection effect directly on your text. No images or complex masking required—everything is handled in real-time via the Framer property panel.

Key Features

  • Extended Typography: Integrated font picker for Google Fonts and custom weights.

  • Mirror Physics: Control Reflection Gap, Opacity, and Length with precision.

  • SEO & Accessibility: Renders as a clean HTML header tag, keeping your site searchable.

  • Performance First: Built with lightweight CSS logic for zero lag on scroll or resize.

  • Fully Responsive: Adapts instantly to Mobile, Tablet, and Desktop breakpoints.

How to Use

  1. Drag & Drop: Place the Reflective Text component onto your canvas.

  2. Edit Content: Type your text directly in the "Text" property field.

  3. Stylize: Use the Extended Font controls to match your brand's typography.

  4. Refine Mirror: Adjust the "Gap" (use negative values for a tighter look) and "Length" to blend the reflection into your background.