Before / After Slider — Design Refinement / Premium Variant

What it does

• Quiet draggable divider — the divider moves smoothly without flashy motion
• Refined image layout — before and after sit on a generous, neutral background
• Annotation labels per side — short notes call out what's different on the before vs the after
• Smooth real-time reveal — the after slides over the before with no lag
• Premium caption strip — the caption reads like a designer's note rather than a marketing line
• Touch and mouse support — works equally well for taps and clicks

Best use cases

• Brand and logo design — refinement passes, mark evolution
• Product and UX design — interface polish, button redesigns, layout refinement
• Graphic and editorial design — poster, layout, typography refinement
• Architecture and interiors — schematic vs final, finish-level refinement
• Photography — raw vs finished edit, color grading studies
• Writing and editorial — first draft vs polished line, headline studies

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, annotation tone, and accent — bias muted, premium palettes
• Fonts — a refined editorial display font for the title and a clean body font for annotations and caption
• Copy — title, considered intro, before annotation, after annotation, and caption explanation
• Images — the before and after pair, often a design comparison
• Behavior — control divider snap behavior, starting position, and whether the divider auto-animates on first view