Micro-interactions

Rift

A draggable tear between two overlaid scenes — push past an edge and it resists, then snaps back.

Cook BookClip-path Before / after slider Drag Rubber-banding Continuity transition Reveal

Controls

position50 %

handleWidth2 px

rubberBand0.35

angle0 °

snapBack

glow0.40

accentColor

#a855f7

Install

bun add clsx tailwind-merge

Then copy 2 files into your project:

components/registry/rift/rift.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
position	number	50	Resting position of the tear.
handleWidth	number	2	Thickness of the divider line.
rubberBand	number	0.35	Give when dragged past an edge, hard stop → loose.
angle	number	0	Lean of the tear off vertical.
snapBack	boolean	false	Return to the resting position on release.
glow	number	0.4	Bloom along the divider.
accentColor	string (hex)	"#a855f7"	Amethyst divider.

What It Demonstrates

Clip-path: Clipping an element to a shape, used for reveals, masks, and before/after sliders.
Before / after slider: A draggable divider that wipes between two overlaid images to compare them.
Drag: Moving an element by grabbing it, often with momentum when released.
Rubber-banding: Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
Continuity transition: A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
Reveal: Content is uncovered gradually, often by animating a clip-path or mask.

Related Components

Appears In

"use client"; import { useCallback, useRef, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface RiftProps { before?: ReactNode; after?: ReactNode; className?: string; position?: number; handleWidth?: number; rubberBand?: number; angle?: number; snapBack?: boolean; glow?: number; accentColor?: string; reducedMotion?: boolean; } const RIFT_CSS = ` @property --sg-rift-pos { syntax: "<number>"; inherits: true; initial-value: 50; } `; const EASE = "cubic-bezier(0.22, 1, 0.36, 1)"; function resist(raw: number, rubberBand: number): number { if (raw >= 0 && raw <= 100) return raw; const edge = raw < 0 ? 0 : 100; const over = raw - edge; const give = 18 * rubberBand; if (give <= 0) return edge; return edge + give * Math.tanh(over / give); } export default function Rift({ before, after, className, position = 50, handleWidth = 2, rubberBand = 0.35, angle = 0, snapBack = false, glow = 0.4, accentColor = "#a855f7", reducedMotion = false, }: RiftProps) { const rootRef = useRef<HTMLDivElement>(null); const [pos, setPos] = useState(position); const [dragging, setDragging] = useState(false); const fromClientX = useCallback((clientX: number) => { const el = rootRef.current; if (!el) return null; const rect = el.getBoundingClientRect(); return ((clientX - rect.left) / rect.width) * 100; }, []); const onPointerDown = useCallback( (e: React.PointerEvent<HTMLDivElement>) => { const raw = fromClientX(e.clientX); if (raw === null) return; e.currentTarget.setPointerCapture(e.pointerId); setDragging(true); setPos(resist(raw, rubberBand)); }, [fromClientX, rubberBand], ); const onPointerMove = useCallback( (e: React.PointerEvent<HTMLDivElement>) => { if (!dragging) return; const raw = fromClientX(e.clientX); if (raw === null) return; setPos(resist(raw, rubberBand)); }, [dragging, fromClientX, rubberBand], ); const onPointerUp = useCallback( (e: React.PointerEvent<HTMLDivElement>) => { if (!dragging) return; e.currentTarget.releasePointerCapture(e.pointerId); setDragging(false); setPos((p) => (snapBack ? position : Math.min(100, Math.max(0, p)))); }, [dragging, snapBack, position], ); const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => { const step = e.shiftKey ? 10 : 2; if (e.key === "ArrowLeft") { e.preventDefault(); setPos((p) => Math.max(0, p - step)); } else if (e.key === "ArrowRight") { e.preventDefault(); setPos((p) => Math.min(100, p + step)); } else if (e.key === "Home") { e.preventDefault(); setPos(0); } else if (e.key === "End") { e.preventDefault(); setPos(100); } }, []); const lean = angle * 0.4; const clip = `polygon(0% 0%, calc((var(--sg-rift-pos) + ${lean}) * 1%) 0%, calc((var(--sg-rift-pos) - ${lean}) * 1%) 100%, 0% 100%)`; const settle = dragging || reducedMotion ? "none" : `--sg-rift-pos 420ms ${EASE}`; return ( <div ref={rootRef} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp} className={cn( "relative isolate touch-none select-none overflow-hidden", dragging ? "cursor-grabbing" : "cursor-ew-resize", className, )} style={ { "--sg-rift-pos": pos, transition: settle, } as React.CSSProperties } > <style>{RIFT_CSS}</style> <div className="absolute inset-0 z-0">{after}</div> <div className="absolute inset-0 z-10" style={{ clipPath: clip, WebkitClipPath: clip }} > {before} </div> <div role="slider" tabIndex={0} aria-label="Reveal position" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(Math.min(100, Math.max(0, pos)))} onKeyDown={onKeyDown} className="group absolute inset-y-0 z-20 outline-none" style={{ left: "calc(var(--sg-rift-pos) * 1%)", width: `${Math.max(handleWidth, 2)}px`, transform: `translateX(-50%) rotate(${angle}deg)`, }} > <span aria-hidden className="absolute inset-0" style={{ background: accentColor, boxShadow: glow > 0 ? `0 0 ${(glow * 24).toFixed(0)}px ${(glow * 4).toFixed(0)}px ${accentColor}` : undefined, opacity: 0.9, }} /> <span aria-hidden className="absolute left-1/2 top-1/2 flex size-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-hairline bg-panel/90 font-display text-[11px] text-ink backdrop-blur" > ⇄ </span> <span className="pointer-events-none absolute left-1/2 top-1/2 size-11 -translate-x-1/2 -translate-y-1/2 rounded-full ring-accent transition-shadow group-focus-visible:ring-2" /> </div> </div> ); }

Rift

Controls

Install

Props

What It Demonstrates

Related Components

Stagger Menu

Aperture

Lens

Pixel Transition

Morph Dialog

Hover List

Appears In

Controls