@remix-run/ui 0.3.0 → 0.4.0

package/dist/utils/scroll-lock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroll-lock.js","sourceRoot":"","sources":["../../src/utils/scroll-lock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAwC,MAAM,eAAe,CAAA;AAUrF,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAA;AAE5D,MAAM,UAAU,UAAU,CAAC,iBAAuC,UAAU,CAAC,QAAQ;IACnF,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;QACzD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,IAAI,QAAQ,GAAG,cAAc,CAAA;IAC7B,IAAI,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAA;IAC9C,IAAI,IAAI,GAAG,QAAQ,CAAC,WAAY,CAAA;IAChC,IAAI,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAErC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAC1B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAC1B,IAAI,cAAc,GAChB,eAAe,CAAC,WAAW,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC,CAAC;YAC5D,CAAC,CAAC,CAAC,CAAA;QACP,IAAI,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,eAAe,CAAA;QAEpF,KAAK,GAAG;YACN,KAAK,EAAE,CAAC;YACR,gBAAgB,EAAE,eAAe,CAAC,KAAK,CAAC,QAAQ;YAChD,uBAAuB,EAAE,eAAe,CAAC,KAAK,CAAC,eAAe;YAC9D,OAAO;YACP,OAAO;SACR,CAAA;QAED,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACzC,IAAI,cAAc,GAAG,CAAC,IAAI,uBAAuB,KAAK,MAAM,EAAE,CAAC;YAC7D,eAAe,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAA;QAClD,CAAC;QAED,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAClC,CAAC;IAED,KAAK,CAAC,KAAK,EAAE,CAAA;IAEb,IAAI,QAAQ,GAAG,KAAK,CAAA;IAEpB,OAAO,GAAG,EAAE;QACV,IAAI,QAAQ,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,QAAQ,GAAG,IAAI,CAAA;QAEf,IAAI,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,YAAY,CAAC,KAAK,EAAE,CAAA;QACpB,IAAI,YAAY,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;YAC3B,OAAM;QACR,CAAC;QAED,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;QAE5B,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC,gBAAgB,CAAA;QAC9D,eAAe,CAAC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,uBAAuB,CAAA;QAC5E,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC3D,CAAC,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAgD,WAAW,CAIxF,CAAC,MAAM,EAAE,EAAE;IACX,IAAI,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;IAE3B,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC3C,YAAY,EAAE,CAAA;QACd,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,EAAE,CAAC;QACX,EAAE,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAC3B,YAAY,EAAE,CAAA;YACd,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;YAEvB,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;gBAC9B,OAAM;YACR,CAAC;YAED,YAAY,GAAG,UAAU,CAAE,KAAK,CAAC,aAA6B,CAAC,aAAa,CAAC,CAAA;QAC/E,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/utils/wait-for-css-transition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wait-for-css-transition.js","sourceRoot":"","sources":["../../src/utils/wait-for-css-transition.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAC,IAAiB,EAAE,MAAmB,EAAE,MAAmB;IAC9F,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,IAAI,QAAQ,GAAG,KAAK,CAAA;QACpB,IAAI,gBAAgB,GAAG,KAAK,CAAA;QAC5B,IAAI,YAAY,GAAG,CAAC,CAAA;QACpB,IAAI,aAAa,GAAG,CAAC,CAAA;QAErB,SAAS,OAAO;YACd,oBAAoB,CAAC,YAAY,CAAC,CAAA;YAClC,oBAAoB,CAAC,aAAa,CAAC,CAAA;YACnC,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;YAC9D,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YACjD,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;YACpD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;QAC7C,CAAC;QAED,SAAS,mBAAmB,CAAC,KAAsB;YACjD,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC1B,OAAM;YACR,CAAC;YAED,gBAAgB,GAAG,IAAI,CAAA;QACzB,CAAC;QAED,SAAS,MAAM,CAAC,KAAa;YAC3B,IAAI,KAAK,YAAY,eAAe,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC9D,OAAM;YACR,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YAED,QAAQ,GAAG,IAAI,CAAA;YACf,OAAO,EAAE,CAAA;YACT,OAAO,EAAE,CAAA;QACX,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;QAC3D,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;QACjD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;QAExD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC;gBACH,MAAM,EAAE,CAAA;YACV,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,EAAE,CAAA;gBACT,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC;QAED,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,EAAE,CAAA;YACR,OAAM;QACR,CAAC;QAED,YAAY,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,aAAa,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACtB,MAAM,EAAE,CAAA;gBACV,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/utils/wait.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wait.js","sourceRoot":"","sources":["../../src/utils/wait.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAAC,EAAU;IAC7B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/src/animation/demos/animation.demo.tsx

@@ -1,194 +0,0 @@
-import { css, on, type Handle, type RemixNode } from '@remix-run/ui'
-import { DefaultAnimate } from './default-animate.tsx'
-import { EnterAnimation } from './enter.tsx'
-import { ExitAnimation } from './exit.tsx'
-import { Press } from './press.tsx'
-import { HTMLContent } from './html-content.tsx'
-import { Keyframes } from './keyframes.tsx'
-import { InterruptibleKeyframes } from './interruptible-keyframes.tsx'
-import { RollingSquare } from './rolling-square.tsx'
-import { Rotate } from './rotate.tsx'
-import { TransitionOptions } from './transition-options.tsx'
-import { Cube } from './cube.tsx'
-import { SharedLayout } from './shared-layout.tsx'
-import { AspectRatio } from './aspect-ratio.tsx'
-import { BouncySwitch } from './bouncy-switch.tsx'
-import { ColorInterpolation } from './color-interpolation.tsx'
-import { FlipToggle } from './flip-toggle.tsx'
-import { Reordering } from './reordering.tsx'
-import { MultiStateBadge } from './multi-state-badge.tsx'
-import { HoldToConfirm } from './hold-to-confirm.tsx'
-import { MaterialRipple } from './material-ripple.tsx'
-
-function Tile(handle: Handle<{ title: string; children: RemixNode; notes?: string }>) {
-  let remountKey = 0
-
-  return () => {
-    let { title, children, notes } = handle.props
-
-    return (
-      <div
-        mix={[
-          css({
-            backgroundColor: 'white',
-            padding: '40px',
-            borderRadius: 12,
-            boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            gap: 12,
-            position: 'relative',
-          }),
-        ]}
-      >
-        <button
-          mix={[
-            css({
-              position: 'absolute',
-              bottom: 8,
-              right: 8,
-              width: 18,
-              height: 18,
-              padding: 0,
-              border: 'none',
-              background: 'transparent',
-              cursor: 'pointer',
-              opacity: 0.4,
-              '&:hover': {
-                opacity: 1,
-              },
-            }),
-            on('click', () => {
-              remountKey++
-              handle.update()
-            }),
-          ]}
-          title="Replay animation"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M1 4v6h6M23 20v-6h-6" />
-            <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
-          </svg>
-        </button>
-        <h3 mix={[css({ margin: 0 })]}>{title}</h3>
-        <div
-          key={remountKey}
-          mix={[
-            css({
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              minHeight: 280,
-            }),
-          ]}
-        >
-          {children}
-        </div>
-        {notes && (
-          <p
-            mix={[
-              css({
-                margin: 0,
-                fontSize: 12,
-                color: '#666',
-                textAlign: 'center',
-                maxWidth: '200px',
-              }),
-            ]}
-          >
-            {notes}
-          </p>
-        )}
-      </div>
-    )
-  }
-}
-
-/**
- * @name Animation Gallery
- * @description A collection of motion and animation experiments adapted from the standalone demos.
- */
-export default function AnimationGallery() {
-  return () => (
-    <>
-      <h1 mix={[css({ marginBottom: 0, '& + p': { marginTop: 0 } })]}>Animations</h1>
-      <p>
-        Most animations are adapted from <a href="https://www.motion.dev">Motion</a>. Thank you for
-        your work <a href="https://motion.dev/@matt">Matt Perry</a>!
-      </p>
-      <div
-        mix={[
-          css({
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
-            gap: 24,
-            marginTop: 40,
-          }),
-        ]}
-      >
-        <Tile title="Default Animate" notes="animateEntrance + animateLayout defaults">
-          <DefaultAnimate />
-        </Tile>
-        <Tile title="Rolling Square" notes="CSS transition with spring() timing function">
-          <RollingSquare />
-        </Tile>
-        <Tile title="Enter Animation" notes="animateEntrance() with spring physics">
-          <EnterAnimation />
-        </Tile>
-        <Tile title="Exit Animation" notes="animateEntrance() + animateExit()">
-          <ExitAnimation />
-        </Tile>
-        <Tile title="Press Interaction" notes="CSS transition + pointer/keyboard events">
-          <Press />
-        </Tile>
-        <Tile title="HTML Content" notes="rAF loop with spring iterator for text">
-          <HTMLContent />
-        </Tile>
-        <Tile title="Keyframes" notes="CSS @keyframes with infinite loop">
-          <Keyframes />
-        </Tile>
-        <Tile title="Interruptible Keyframes" notes="Web Animations API with commitStyles()">
-          <InterruptibleKeyframes />
-        </Tile>
-        <Tile title="Rotate" notes="CSS @keyframes (one-shot)">
-          <Rotate />
-        </Tile>
-        <Tile title="Transition Options" notes="animateEntrance() with cubic-bezier + delay">
-          <TransitionOptions />
-        </Tile>
-        <Tile title="3D Cube" notes="rAF loop with direct style manipulation">
-          <Cube />
-        </Tile>
-        <Tile title="Shared Layout" notes="CSS Grid overlap for simultaneous enter/exit">
-          <SharedLayout />
-        </Tile>
-        <Tile title="Aspect Ratio">
-          <AspectRatio />
-        </Tile>
-        <Tile title="Bouncy Switch" notes="Spring up, bounce down with CSS linear()">
-          <BouncySwitch />
-        </Tile>
-        <Tile title="FLIP Toggle" notes="animateLayout() with interruptible WAAPI">
-          <FlipToggle />
-        </Tile>
-        <Tile title="Reordering" notes="animateLayout() with auto-shuffling list">
-          <Reordering />
-        </Tile>
-        <Tile title="Color Interpolation" notes="sRGB vs OKLCH color space">
-          <ColorInterpolation />
-        </Tile>
-        <Tile title="Multi-State Badge" notes="Animated icon/label swap with WAAPI shake">
-          <MultiStateBadge />
-        </Tile>
-        <Tile title="Hold to Confirm" notes="Custom interaction with progress tracking">
-          <HoldToConfirm />
-        </Tile>
-        <Tile title="Material Ripple" notes="Pointer-tracked ripples with enter/exit animations">
-          <MaterialRipple />
-        </Tile>
-      </div>
-    </>
-  )
-}

package/src/animation/demos/spring.demo.tsx

@@ -1,385 +0,0 @@
-import { addEventListeners, css, on, ref, type Handle } from '@remix-run/ui'
-
-import { dragVelocityEvents } from './drag-release.ts'
-import { spring, type SpringPreset } from '@remix-run/ui/animation'
-
-interface TrailPoint {
-  x: number
-  y: number
-  time: number
-}
-
-function PointerTrail(handle: Handle) {
-  let canvas: HTMLCanvasElement
-  let points: TrailPoint[] = []
-  let isDown = false
-  let releaseTime = 0
-  let animationId: number | null = null
-
-  let maxAge = 150 // ms - how long points stay in the trail while dragging
-  let fadeDuration = 800 // ms - how long the trail fades after release
-
-  function draw() {
-    if (!canvas) return
-    let ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    let now = performance.now()
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    // Calculate overall opacity based on release time
-    let overallOpacity = 1
-    if (!isDown && releaseTime > 0) {
-      let elapsed = now - releaseTime
-      overallOpacity = Math.max(0, 1 - elapsed / fadeDuration)
-      if (overallOpacity <= 0) {
-        points = []
-        animationId = null
-        return
-      }
-    }
-
-    // Filter out old points while dragging
-    if (isDown) {
-      points = points.filter((p) => now - p.time < maxAge)
-    }
-
-    if (points.length < 2) {
-      if (isDown || overallOpacity > 0) {
-        animationId = requestAnimationFrame(draw)
-      } else {
-        animationId = null
-      }
-      return
-    }
-
-    // Draw the trail as a tapered path
-    ctx.beginPath()
-    ctx.lineCap = 'round'
-    ctx.lineJoin = 'round'
-
-    for (let i = 1; i < points.length; i++) {
-      let prev = points[i - 1]
-      let curr = points[i]
-
-      // Age-based opacity (older = more transparent)
-      let age = isDown ? (now - prev.time) / maxAge : 0
-      let segmentOpacity = (1 - age) * overallOpacity
-
-      // Thickness tapers from thin (old) to thick (new)
-      let progress = i / (points.length - 1)
-      let thickness = 2 + progress * 8
-
-      ctx.beginPath()
-      ctx.moveTo(prev.x, prev.y)
-      ctx.lineTo(curr.x, curr.y)
-      ctx.strokeStyle = `rgba(14, 165, 233, ${segmentOpacity * 0.6})`
-      ctx.lineWidth = thickness
-      ctx.stroke()
-    }
-
-    // Draw a red glow at the end to show direction
-    if (points.length > 0) {
-      let last = points[points.length - 1]
-      let gradient = ctx.createRadialGradient(last.x, last.y, 0, last.x, last.y, 20)
-      gradient.addColorStop(0, `rgba(239, 68, 68, ${overallOpacity * 0.6})`)
-      gradient.addColorStop(1, 'rgba(239, 68, 68, 0)')
-      ctx.fillStyle = gradient
-      ctx.beginPath()
-      ctx.arc(last.x, last.y, 20, 0, Math.PI * 2)
-      ctx.fill()
-    }
-
-    animationId = requestAnimationFrame(draw)
-  }
-
-  function startDrawing() {
-    if (!animationId) {
-      animationId = requestAnimationFrame(draw)
-    }
-  }
-
-  if (typeof document !== 'undefined') {
-    addEventListeners(document, handle.signal, {
-      pointerdown(event) {
-        if (!(event.target as HTMLElement).closest('.draggable')) return
-        isDown = true
-        releaseTime = 0
-        points = [{ x: event.clientX, y: event.clientY, time: performance.now() }]
-        startDrawing()
-      },
-
-      pointermove(event) {
-        if (!isDown) return
-        points.push({ x: event.clientX, y: event.clientY, time: performance.now() })
-      },
-
-      pointerup() {
-        if (!isDown) return
-        isDown = false
-        releaseTime = performance.now()
-      },
-
-      pointercancel() {
-        isDown = false
-        releaseTime = performance.now()
-      },
-    })
-  }
-
-  return () => (
-    <canvas
-      mix={[
-        ref((node) => {
-          canvas = node
-          canvas.width = window.innerWidth
-          canvas.height = window.innerHeight
-        }),
-        css({
-          position: 'absolute',
-          inset: 0,
-          pointerEvents: 'none',
-          zIndex: 5,
-        }),
-      ]}
-    />
-  )
-}
-
-/**
- * @name Spring Drag Release
- * @description A full-screen spring physics playground with click targets and drag-release velocity.
- */
-export default function SpringDemo(handle: Handle) {
-  let viewportWidth = globalThis.window?.innerWidth ?? 1000
-  let viewportHeight = globalThis.window?.innerHeight ?? 700
-
-  // Target circle position (click to move)
-  let targetX = viewportWidth / 2
-  let targetY = viewportHeight / 2
-
-  // Draggable circle state
-  let dragX = viewportWidth / 2 - 150
-  let dragY = viewportHeight / 2
-  let isDragging = false
-  let isAnimating = false
-
-  // Current spring transitions (separate for X and Y to capture 2D velocity)
-  let transitionX = ''
-  let transitionY = ''
-
-  let selectedPreset: SpringPreset = 'bouncy'
-
-  // Get default spring transition for target circle
-  let springValue = spring(selectedPreset)
-
-  if (typeof document !== 'undefined') {
-    addEventListeners(document, handle.signal, {
-      click(event) {
-        // Ignore clicks on controls or when dragging
-        if ((event.target as HTMLElement).closest('.controls')) return
-        if ((event.target as HTMLElement).closest('.draggable')) return
-
-        targetX = event.clientX
-        targetY = event.clientY
-        handle.update()
-      },
-    })
-  }
-
-  return () => (
-    <div
-      mix={[
-        css({
-          position: 'fixed',
-          inset: 0,
-          backgroundColor: '#1a1a2e',
-          cursor: 'crosshair',
-          overflow: 'hidden',
-        }),
-      ]}
-    >
-      {/* Pointer trail */}
-      <PointerTrail />
-
-      {/* Target circle */}
-      <div
-        mix={[
-          css({
-            position: 'absolute',
-            width: '80px',
-            height: '80px',
-            borderRadius: '50%',
-            backgroundColor: 'transparent',
-            border: '3px dashed rgba(233, 69, 96, 0.5)',
-            transform: 'translate(-50%, -50%)',
-            pointerEvents: 'none',
-          }),
-        ]}
-        style={{
-          left: `${targetX}px`,
-          top: `${targetY}px`,
-          transition: `left ${springValue}, top ${springValue}`,
-        }}
-      />
-
-      {/* Draggable circle */}
-      <div
-        className="draggable"
-        mix={[
-          css({
-            position: 'absolute',
-            width: '60px',
-            height: '60px',
-            borderRadius: '50%',
-            backgroundColor: '#0ea5e9',
-            boxShadow: '0 0 20px rgba(14, 165, 233, 0.5)',
-            transform: 'translate(-50%, -50%)',
-            userSelect: 'none',
-            touchAction: 'none',
-            zIndex: 10,
-          }),
-          on('transitionend', () => {
-            isAnimating = false
-            handle.update()
-          }),
-          on('pointerdown', (event) => {
-            event.preventDefault()
-            isDragging = true
-            isAnimating = false
-            handle.update()
-          }),
-          on('pointermove', (event) => {
-            if (!isDragging) return
-            dragX = event.clientX
-            dragY = event.clientY
-            handle.update()
-          }),
-          dragVelocityEvents(),
-          on(dragVelocityEvents.release, (event) => {
-            isDragging = false
-
-            // Calculate distance to target on each axis
-            let distX = targetX - dragX
-            let distY = targetY - dragY
-
-            if (Math.abs(distX) < 1 && Math.abs(distY) < 1) {
-              handle.update()
-              return
-            }
-
-            // Create separate springs for X and Y with their own normalized velocities
-            // normalizedVelocity = velocity / distance (with sign!) for each axis
-            // The sign matters: positive = moving toward target, negative = moving away
-            if (Math.abs(distX) >= 1) {
-              let normalizedVelocityX = event.velocityX / distX
-              normalizedVelocityX = Math.max(-20, Math.min(20, normalizedVelocityX))
-              transitionX = String(spring(selectedPreset, { velocity: normalizedVelocityX }))
-            } else {
-              transitionX = String(spring(selectedPreset))
-            }
-
-            if (Math.abs(distY) >= 1) {
-              let normalizedVelocityY = event.velocityY / distY
-              normalizedVelocityY = Math.max(-20, Math.min(20, normalizedVelocityY))
-              transitionY = String(spring(selectedPreset, { velocity: normalizedVelocityY }))
-            } else {
-              transitionY = String(spring(selectedPreset))
-            }
-
-            // Animate to target
-            isAnimating = true
-            dragX = targetX
-            dragY = targetY
-            handle.update()
-          }),
-        ]}
-        style={{
-          left: `${dragX}px`,
-          top: `${dragY}px`,
-          cursor: isDragging ? 'grabbing' : 'grab',
-          transition: isAnimating ? `left ${transitionX}, top ${transitionY}` : 'none',
-        }}
-      />
-
-      {/* Controls */}
-      <div
-        className="controls"
-        mix={[
-          css({
-            position: 'absolute',
-            top: '20px',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            display: 'flex',
-            gap: '4px',
-            padding: '4px',
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            borderRadius: '8px',
-            fontFamily: 'system-ui, sans-serif',
-            fontSize: '14px',
-            cursor: 'default',
-          }),
-        ]}
-      >
-        {(Object.keys(spring.presets) as SpringPreset[]).map((preset) => (
-          <label
-            key={preset}
-            mix={[
-              css({
-                display: 'flex',
-                alignItems: 'center',
-                gap: '6px',
-                padding: '8px 12px',
-                borderRadius: '6px',
-                color: '#fff',
-                cursor: 'pointer',
-                transition: 'background-color 150ms ease',
-                '&:hover': {
-                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                },
-                '&:has(input:checked)': {
-                  backgroundColor: 'rgba(14, 165, 233, 0.3)',
-                },
-              }),
-            ]}
-          >
-            <input
-              type="radio"
-              name="spring-preset"
-              value={preset}
-              checked={selectedPreset === preset}
-              mix={[
-                css({ accentColor: '#0ea5e9' }),
-                on('change', () => {
-                  selectedPreset = preset
-                  springValue = spring(selectedPreset)
-                  handle.update()
-                }),
-              ]}
-            />
-            {preset}
-          </label>
-        ))}
-      </div>
-
-      {/* Instructions */}
-      <div
-        mix={[
-          css({
-            position: 'absolute',
-            bottom: '20px',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            color: '#ffffff80',
-            fontFamily: 'system-ui, sans-serif',
-            fontSize: '14px',
-            textAlign: 'center',
-          }),
-        ]}
-      >
-        Click to move target • Drag the blue circle and release to see velocity-based spring
-      </div>
-    </div>
-  )
-}