Before / After Slider — Renovation / Reveal Variant

What it does

• Draggable reveal divider — the learner pulls a confident vertical handle across the image
• Large-format image layout — before and after images fill the frame for maximum reveal impact
• Reveal-day framing — title and labels read like a reveal-day moment rather than a tutorial step
• Smooth real-time reveal — the after slides over the before with no lag
• Story caption strip — a short caption frames the journey from before to after
• Touch and mouse support — works equally well for taps and clicks

Best use cases

• Home renovation and interiors — kitchen, bathroom, full-room reveals
• Restoration — furniture refinishing, classic-car restoration, antique repair
• Landscape and garden — yard makeovers, garden builds, hardscape projects
• Real estate — full-property transformations, staging projects
• Personal transformation stories — fitness journeys, style makeovers
• Brand and identity — full rebrand reveals, website redesigns

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for page background, divider line, divider handle, caption tone, and accent — bias bold reveal palettes
• Fonts — a confident display font for the title and a strong body font for the reveal caption
• Copy — title, story-driven intro, before label, after label, and caption explanation
• Images — the large-format before and after pair
• Behavior — control divider snap behavior, starting position, and whether the divider auto-animates on first view