Docu Slider
Interactive before/after slider testimonial with drag interaction.
Main Features of Docu Slider
How to Use Docu Slider in Next.js
Installation Guide for Docu Slider
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
beforeImage | string | https://images.unsplash.com/photo-1444419988131-046ed4e5ffd6?q=80&w=1170&auto=format&fit=crop | Before image source URL. |
afterImage | string | https://images.unsplash.com/photo-1600607686527-6fb886090705?w=1200&q=80 | After image source URL. |
beforeText | string | We were drowning in manual processes and messy spreadsheets. | Text displayed when slider is on before side. |
afterText | string | The transformation was instant. Efficiency up 400% | Text displayed when slider is on after side. |
backgroundColor | string | #18181b | Background color (hex, rgb, or hsl). |
beforeLabel | string | BEFORE | Before label text. |
afterLabel | string | AFTER | After label text. |
beforeLabelColor | string | #71717a | Before label background color (hex, rgb, or hsl). |
afterLabelColor | string | #10b981 | After label background color (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an organic 'Before-After' aesthetic. Use this layout for an engaging experience where content feels 'Mailed' and 'Drafted' by physical film borders.
Best Practices
Maintain scalable component architecture by keeping the archive labels consistent. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by managed the marquee intensity.
Why This Component Matters in Modern UI Development
Hand-drawn film animations create a sense of digital 'Authenticity' and human touch. This production-ready UI template helpsคุณ build an interface that feels alive and 'Drafted', adding a unique signatures to your brand structure.
Frequently Asked Questions
QHow does the 'Slider' work?
The component features a localized horizontal slider spanning the image, allowing users to 'Seek' through the project narrative with high-fidelity scrubbing interactions.
QCan I adjust labels?
Yes, both the primary background and specific labels (BEFORE/AFTER) are fully configurable to match your brand's specific intensity.
QIs it mobile responsive?
The horizontal flow and typographic scales adapt for mobile, ensuring the 'Draft' narrative remains impactful and structural on small screens.