Text Scroll Loop

Text Scroll Loop

About Text Scroll Loop

The Text Scroll Loop is a premium Framer component designed for creators who want to break away from linear layouts. Perfect for fashion lookbooks, creative portfolios, or brand manifestos, this component creates a "fanning" effect where text elements rotate dynamically around a central axis.

Key Features

  • Physics-Based Interaction: Silky smooth "dragging" and "scrolling" interactions powered by high-performance linear interpolation (LERP).

  • 360° Customization: Total control over the circle radius, text spacing, and offset to create anything from tight clusters to expansive, airy displays.

  • Fully Adaptive: Easily tweak font styles, colors, and alignments directly from the Framer property panel.

  • Infinite Loop: Optimized to repeat your item list seamlessly, ensuring the gallery never hits a "dead end."

  • Hyper-Linked Items: Every text element supports custom links, making it a functional navigation menu as well as a visual centerpiece.

How to Use

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

  2. Add Content: Input your text items and optional "ID" tags (perfect for numbering collections).

  3. Style: Use the Property Controls to adjust the speed, rotation angle, and circle size.

  4. Publish: Your gallery is automatically optimized for touch and desktop interactions.

Technical Specs

  • Performance Optimized: Uses requestAnimationFrame and will-change hardware acceleration for 60fps performance on most devices.

  • Responsive: Scales perfectly across Desktop, Tablet, and Mobile breakpoints.

  • Lightweight: Zero external dependencies beyond React.