Hr_Image_Carousel
“Animated Image Carousel — A modern, motion-driven slider with dynamic text reveals and interactive image transitions.”
Made with Workshop
Build your own component with AI
About this Component
Description:This code defines a Framer React component called Hr Image Carousel, a highly customizable and interactive image slider with animated text reveals and smooth transitions powered by Framer Motion. Each slide displays a background image with a title that animates into view letter by letter, creating an elegant, cinematic reveal effect.
The carousel supports both manual swiping (drag interaction) and autoplay with adjustable intervals. Users can pause autoplay by hovering over the component. The design also includes customizable navigation dots that can change shape, size, and color dynamically depending on the active slide.
It’s built with accessibility in mind, including ARIA roles and labels for screen readers. The component’s appearance, typography, timing, and layout are all configurable directly through Framer property controls, making it ideal for visually rich presentations, portfolios, and modern hero sections.
Key Features:
Animated text reveal using Framer Motion.
Fully customizable images, colors, fonts, and dot indicators.
Autoplay with hover pause functionality.
Manual drag/swipe navigation for intuitive control.
Dynamic transitions with smooth fade animations.
Accessible with ARIA roles for better usability.
