Elevate your website's navigation or feature section with this sophisticated Rolling Text List component. Designed exclusively for Framer, it combines engaging micro-interactions with deep customization options, allowing you to create a unique look that matches your brand identity perfectly.
Key Features:
Signature Rolling Effect: Text smoothly transitions to an italicized, colored state on hover using a custom Bezier curve for a premium feel.
Dynamic Image Reveal: Hovering over a list item reveals a contextual image with a subtle rotation and scale animation.
Zero Dependencies: Built with pure React and Framer Motion. No external CSS frameworks or libraries required.
Deep Customization:
Typography: Full control over fonts (Family, Weight, Size) for Headers, Titles, and Categories.
Global & Local Styling: Set global defaults or override fonts and colors for specific list items to create distinct looks.
Layout Control: Adjustable row height, padding, and border colors to fit any design system.
Functional Links: Each item supports unique URLs, automatically handling external links (new tab) and internal navigation.
Usage: Simply drag and drop onto your Framer canvas. Use the property sidebar to add items, upload images, and tweak the styling to match your project. Ideal for process steps, portfolios, services lists, or interactive menus.