LumeShift

Bring your content to life with LumeShift – an advanced hover slider that animates both text and images in perfect sync. As users hover from one slide to another, the headline shifts with smooth motion while the background image transforms dynamically, creating a high end storytelling effect.

Ideal for agencies, startups, and creatives who want their service or portfolio sections to stand out with modern motion design.

✨ Key Features

• Dual Animation System – Both text and image animate together for a seamless reveal effect.

• Multiple Animation Types – Choose from fade, slide, scale, or custom transitions.

• Staggered Transitions – Fine-tune how text and images animate with customizable delays.

• Up to 6 Slides – Add 3–6 slides for flexible storytelling.

• Typography Control – Set fonts, sizes, spacing, and alignment for titles and slides.

• Image Radius & Style – Control corner radius for modern rounded or sharp-edged looks.

• Dynamic Accent Color – Add a highlight color that syncs with hover animations.

• Section Labeling – Add custom section titles (e.g., “Our Services”) for structure.

• Background & Overlay Options – Customize background color to match your theme.

• Responsive & Smooth – Optimized for all screen sizes with high-performance animation.

⚙️ Customization Options (Right Panel Controls)

• Slides – Add/edit up to 6 slides (headline + image).

• Animation Type – Fade, slide, scale, or mixed transitions.

• Animation Duration – Control the speed of transitions.

• Animation Easing – Fine-tune motion feel with ease in/out options.

• Stagger Delay – Adjust stagger timing between text and image reveals.

• Image Radius – Rounded or sharp corners for images.

• Background – Solid or gradient background colors.

• Text Color – Full control over headline colors.

• Accent Color – Highlight color for hover effects.

• Section Title – Add custom labels above your slider.

• Title Font – Customize section headline font.

• Slide Font – Customize slide text font.

  

💡 Perfect Use Cases

• Agency Service Sections – Showcase offerings with animated text + visuals.

• Creative Portfolios – Present projects with a cinematic hover effect.

• Product Features – Highlight product benefits with engaging motion.

• Landing Pages – Capture attention with dynamic hero sections.

• Event / Campaign Pages – Tell stories with motion-driven visuals.

🎯 Why LumeShift?

• Dual animations (text + image) for a premium experience

• Fully customizable in @framer, no code required

• Responsive, smooth, and lightweight

• Perfect for modern, interactive websites