@remix-run/ui 0.1.2 → 0.3.0

package/src/animation/demos/shared-layout.tsx

@@ -0,0 +1,211 @@
+import { css, on, type Handle, type RemixNode } from '@remix-run/ui'
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+
+const ease = 'cubic-bezier(0.26, 0.02, 0.23, 0.94)'
+
+function OverlapExample(handle: Handle<{ state: boolean }>) {
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => {
+    let { state } = handle.props
+    let animationMix = [
+      animateExit({
+        opacity: 0,
+        transform: 'scale(0.8)',
+        duration: 300,
+        easing: ease,
+      }),
+    ]
+    if (shouldAnimate) {
+      animationMix.unshift(
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.6)',
+          duration: 300,
+          easing: ease,
+        }),
+      )
+    }
+
+    return (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+function WaitExample(handle: Handle<{ state: boolean }>) {
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => {
+    let { state } = handle.props
+    let animationMix = [
+      animateExit({
+        opacity: 0,
+        transform: 'scale(0.8)',
+        duration: 300,
+        easing: ease,
+      }),
+    ]
+    if (shouldAnimate) {
+      animationMix.unshift(
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.6)',
+          duration: 300,
+          easing: ease,
+          delay: 300,
+        }),
+      )
+    }
+
+    return (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export function SharedLayout(handle: Handle) {
+  let state = true
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 16 })]}>
+        <OverlapExample state={state} />
+        <WaitExample state={state} />
+      </div>
+      <button
+        mix={[
+          css({
+            backgroundColor: '#0f1115',
+            color: '#f5f5f5',
+            border: 'none',
+            borderRadius: 8,
+            padding: '12px 32px',
+            fontSize: 14,
+            fontWeight: 500,
+            cursor: 'pointer',
+            transition: 'transform 100ms ease-in-out',
+            '&:active': {
+              transform: 'scale(0.95)',
+            },
+          }),
+          on('click', () => {
+            state = !state
+            handle.update()
+          }),
+        ]}
+      >
+        Switch
+      </button>
+    </div>
+  )
+}
+
+function Circle(handle: Handle<{ filled?: boolean; children: RemixNode }>) {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 80,
+          height: 80,
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxSizing: 'border-box',
+          backgroundColor: handle.props.filled ? '#0f1115' : 'transparent',
+          color: handle.props.filled ? '#f5f5f5' : '#0f1115',
+          border: handle.props.filled ? '2px solid #0f1115' : '2px solid #0f1115',
+        }),
+      ]}
+    >
+      {handle.props.children}
+    </div>
+  )
+}
+
+function FilledIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+      <path d="m21 3-9 9" />
+      <path d="M15 3h6v6" />
+    </svg>
+  )
+}
+
+function OutlineIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M9 12h6" />
+    </svg>
+  )
+}

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

@@ -0,0 +1,385 @@
+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>
+  )
+}

package/src/animation/demos/transition-options.tsx

@@ -0,0 +1,24 @@
+import { css } from '@remix-run/ui'
+import { animateEntrance } from '@remix-run/ui/animation'
+
+export function TransitionOptions() {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          borderRadius: '50%',
+          backgroundColor: '#9911ff',
+        }),
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.5)',
+          duration: 800,
+          delay: 500,
+          easing: 'cubic-bezier(0, 0.71, 0.2, 1.01)',
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/spring.ts

@@ -38,6 +38,17 @@ export interface SpringIterator extends IterableIterator<number> {
   toString(): string
 }
 
+export interface SpringFunction {
+  (preset: SpringPreset, overrides?: Omit<SpringOptions, 'bounce'>): SpringIterator
+  (options?: SpringOptions): SpringIterator
+  transition(
+    property: string | string[],
+    presetOrOptions?: SpringPreset | SpringOptions,
+    overrides?: Omit<SpringOptions, 'bounce'>,
+  ): string
+  presets: Record<SpringPreset, { duration: number; bounce: number }>
+}
+
 const presets: Record<SpringPreset, { duration: number; bounce: number }> = {
   smooth: { duration: 400, bounce: -0.3 },
   snappy: { duration: 200, bounce: 0 },
@@ -74,7 +85,7 @@ const frameMs = 1000 / 60 // ~16.67ms per frame
  * @param overrides Optional preset overrides.
  * @returns A spring iterator.
  */
-export function spring(
+function createSpring(
   preset: SpringPreset,
   overrides?: Omit<SpringOptions, 'bounce'>,
 ): SpringIterator
@@ -84,8 +95,8 @@ export function spring(
  * @param options Spring parameters.
  * @returns A spring iterator.
  */
-export function spring(options?: SpringOptions): SpringIterator
-export function spring(
+function createSpring(options?: SpringOptions): SpringIterator
+function createSpring(
   presetOrOptions?: SpringPreset | SpringOptions,
   overrides?: Omit<SpringOptions, 'bounce'>,
 ): SpringIterator {
@@ -119,23 +130,46 @@ export function spring(
   return iter as unknown as SpringIterator
 }
 
-// Transition helper for CSS transition property
-spring.transition = function transition(
+function transition(
   property: string | string[],
   presetOrOptions?: SpringPreset | SpringOptions,
   overrides?: Omit<SpringOptions, 'bounce'>,
 ): string {
   let s =
     typeof presetOrOptions === 'string'
-      ? spring(presetOrOptions, overrides)
-      : spring(presetOrOptions)
+      ? createSpring(presetOrOptions, overrides)
+      : createSpring(presetOrOptions)
 
   let properties = Array.isArray(property) ? property : [property]
   return properties.map((p) => `${p} ${s}`).join(', ')
 }
 
-// Access preset defaults
-spring.presets = presets
+/**
+ * Create a spring-physics animation iterator for CSS transitions and WAAPI.
+ *
+ * The returned iterator can be:
+ * - Iterated to get position values (0→1)
+ * - Spread into WAAPI options: `element.animate(keyframes, { ...spring() })`
+ * - Stringified for CSS: `` `transform ${spring()}` ``
+ *
+ * @example
+ * // Named preset
+ * let s = spring('bouncy')
+ * element.style.transition = `transform ${s}`
+ *
+ * @example
+ * // Custom parameters
+ * let s = spring({ duration: 500, bounce: 0.2 })
+ * element.animate(keyframes, { ...s })
+ *
+ * @example
+ * // Transition helper for multiple properties
+ * element.style.transition = spring.transition(['transform', 'opacity'], 'snappy')
+ */
+export const spring: SpringFunction = Object.assign(createSpring, {
+  transition,
+  presets,
+})
 
 function resolveOptions(
   presetOrOptions?: SpringPreset | SpringOptions,