Before / After Slider — Foundational Variant

What it does

• Draggable divider — the learner pulls a vertical handle across the image to control the reveal
• Stacked image layout — before and after images sit precisely aligned beneath each other
• Smooth real-time reveal — the after slides over the before with no lag, as the divider moves
• Caption strip — a short caption beneath the slider names what changed and why it matters
• Touch and mouse support — works equally well for taps and clicks
• Reset to center — the divider can snap back to the middle for a fair comparison

Best use cases

• Photography and design — retouching, color grading, before/after edits
• Home improvement — room transformations, painting, declutter
• Wellness and fitness — body composition, posture changes, transformation stories
• Beauty and grooming — haircuts, skincare progress, makeup looks
• Product and brand — packaging redesigns, brand evolution, logo refreshes
• Real estate — staging before/after, renovation reveals

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 text, and accent
• Fonts — a friendly display font for the title and a readable body font for the caption strip
• Copy — title, intro paragraph, before label, after label, and caption explanation
• Images — the before and after pair, plus an optional small icon or mark
• Behavior — control divider snap behavior (free vs snap-to-center), starting position, and whether the divider auto-animates on first view