Interaction recordK–INSP–015 · Inspiration
xAI Pricing Tabs and Matrix
A three-way audience switch above plan cards, followed by a six-plan comparison matrix that changes its header language across breakpoints.
View studyBack to Explore xAI Imagine
K–INSP–021 · Inspiration · Interaction
xAI Imagine
Restyle Comparator
A draggable divider clips one synchronized restyle over its source while a compact treatment rail swaps the compared media without resetting the composition.
- Authorship
- Third-party inspiration
- Techniques
- Inset clip reveal · Clamped document drag · Paired media playback · Time resynchronization
- Creator
- xAI
- Observed method
- React drag state / document mouse and touch listeners / CSS clip-path / synchronized muted video / treatment tabs
Kaki reconstruction / Live
Move one seam.
Keep one moment.
Drag or focus the comparison slider, then choose a fictional treatment. Both sides keep a shared crop and motion phase so the visual change remains legible.
Original study
Both Kaki scenes share one six-second loop. Changing treatment preserves the phase.
Behavior verified in the supplied xAI Imagine archive · invented Kaki scene, treatments, and code · native range semantics added · motion stopped under reduced motion
Observed system / 03
Difference without
losing the frame.
These diagrams isolate the source mechanics without reproducing its generated media, style samples, page composition, claims, logos, or application code.
Why it is here
The comparison keeps
its evidence aligned.
The useful move is not simply placing two clips side by side. The second is a complete overlay clipped at one movable boundary, which preserves scale, crop, camera position, and temporal context. A visitor reads the treatment change exactly where the seam passes.
The source also treats the style rail as a media switch rather than a new composition. All seven restyles remain mounted, the active layer crossfades over 300 milliseconds, and its playhead is brought back to the original whenever the difference exceeds 0.05 seconds. Kaki uses one shared CSS scene clock to preserve that visible alignment without copying source media.
The divider is unusually direct because it changes only visibility, not layout. The source and restyle keep the same frame, clock, and crop, so the visitor reads transformation rather than two unrelated examples. The treatment rail then changes the right-hand answer without disturbing the question on the left.
- Origin
- xAI Imagine API page, Creative restyle section
- Creator
- xAI
- Source evidence
- User-supplied Safari web archive of x.ai/api/imagine, including rendered HTML, stylesheets, media references, and the page component bundle
- Observed behavior
- A 50-percent default split; original media as the full base and the active restyle as a full overlay clipped with a left inset; a four-pixel divider translated half its own width; a 32-pixel circular handle with a two-pixel border and 16-pixel grip; 1.1-times handle scale on hover; mouse and touch movement measured against the container and clamped from zero to one hundred percent; one original and seven restyle videos mounted together; selected-restyle opacity crossfade over 300 milliseconds; muted looping playback; original and active media playing only while visible, inactive restyles paused; selected restyle time reset to the original when drift exceeds 0.05 seconds
- Kaki treatment
- Kaki-authored reconstruction of the observed fifty-percent split, clamped horizontal drag, left-inset clip reveal, four-pixel divider, centered circular grip, mounted treatment set, 300ms treatment crossfade, paired playback, and 0.05-second resynchronization threshold using fictional animated CSS scenes, invented treatment labels, a native range input, original palette, controls, and code. No xAI video, poster, generated image, style label, product claim, screenshot, logo, class name, or bundled source is republished.
- Accessibility addition
- The source divider exposes pointer and touch dragging but no slider role, keyboard path, value, or label. Kaki replaces that interaction surface with a native range input, visible focus, an announced percentage, genuine treatment buttons, and a pause control. Reduced motion stops the scene and removes crossfades.
- Rights boundary
- No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.
- Reviewed
- August 14, 2026