Home / Prompts / Motion & Interaction / DiffCompare — Smooth Before/After Split-Screen Slider

Motion & Interaction beginner Level Tested & Verified

DiffCompare — Smooth Before/After Split-Screen Slider

K Kinetic Motion Lab @kineticworks | ★ 5.0 (16 reviews) | 39 builders downloaded

What You Build

4 components

Architecture Required

System Architecture & Modular Decomposition

Blueprint component for DiffCompare — Smooth Before/After Split-Screen Slider

Database Required

Data Schema, Entities & Persistence

Blueprint component for DiffCompare — Smooth Before/After Split-Screen Slider

Security Required

Authentication, RBAC & Data Protection

Blueprint component for DiffCompare — Smooth Before/After Split-Screen Slider

Agent Instructions Required

AI Assistant System Directives & Scaffolding Rules

Blueprint component for DiffCompare — Smooth Before/After Split-Screen Slider

Full component content — architecture, database schema, agent instructions and more — unlocks after purchase.

Unlock Build Kit for ₹149

Supported AI Agents

Cursor · optimized v0 · optimized

What the creator declares this works with. See each agent's integration type on the download/build step.

Overview & Architecture

### Overview
Interactive dual-image comparison widget with draggable split line, hover preview, and touch handle.
### Architectural Specifications
Clip-path manipulation, touch coordinate tracking, keyboard arrow navigation, and custom label badges (Before / After).
### Key Highlights
- **Production Blueprint**: Comprehensive end-to-end specifications optimized for modern AI coding tools.
- **Verified AI Compatibility**: Tested with cursor, v0.
- **Performance First**: Zero layout shift, responsive down to 375px viewports, and WCAG AA accessibility.
### Deliverables Included
- Master build instruction prompt (Markdown)
- System architecture and entity specifications
- Design tokens, responsive grids, and micro-interaction curves
- Validation rules, error boundaries, and security parameters