@remix-run/ui 0.1.2 → 0.3.0

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

@@ -0,0 +1,194 @@
+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/aspect-ratio.tsx

@@ -0,0 +1,120 @@
+import { type Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function AspectRatio(handle: Handle) {
+  let aspectRatio = 1
+  let width = 100
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          gap: 20,
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 180,
+            height: 180,
+          }),
+        ]}
+      >
+        <div
+          mix={[
+            css({
+              backgroundColor: '#8df0cc',
+              borderRadius: 10,
+              transition: spring.transition(['width', 'aspect-ratio'], 'bouncy'),
+            }),
+          ]}
+          style={{
+            width,
+            aspectRatio,
+          }}
+        />
+      </div>
+      <div mix={[css({ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' })]}>
+        <label
+          mix={[
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              fontSize: 13,
+              color: '#666',
+            }),
+          ]}
+        >
+          <span mix={[css({ width: 50, flexShrink: 0 })]}>Ratio</span>
+          <input
+            type="range"
+            value={aspectRatio}
+            min={0.2}
+            max={3}
+            step={0.1}
+            mix={[
+              css(rangeInputCss),
+              on('input', (event) => {
+                let value = event.currentTarget.value
+
+                aspectRatio = parseFloat(value)
+                handle.update()
+              }),
+            ]}
+          />
+          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
+            {aspectRatio.toFixed(1)}
+          </span>
+        </label>
+        <label
+          mix={[
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              fontSize: 13,
+              color: '#666',
+            }),
+          ]}
+        >
+          <span mix={[css({ width: 50, flexShrink: 0 })]}>Width</span>
+          <input
+            type="range"
+            value={width}
+            min={20}
+            max={160}
+            step={5}
+            mix={[
+              css(rangeInputCss),
+              on('input', (event) => {
+                let value = event.currentTarget.value
+
+                width = parseFloat(value)
+                handle.update()
+              }),
+            ]}
+          />
+          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
+            {width}
+          </span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+const rangeInputCss = {
+  flex: 1,
+  accentColor: '#8df0cc',
+  cursor: 'pointer',
+} as const

package/src/animation/demos/bouncy-switch.tsx

@@ -0,0 +1,47 @@
+import { type Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+const bounceEasing = `linear(0, 0.258 12%, 0.424 18.3%, 0.633 24.4%, 0.999 33.3%, 0.783 39.8%, 0.733 42.5%, 0.716 45.1%, 0.731 47.6%, 0.777 50.2%, 0.999 57.7%, 0.906 61.7%, 0.883 63.5%, 0.876 65.2%, 0.901 68.7%, 0.999 74.5%, 0.964 77.4%, 0.953 80.1%, 0.961 82.6%, 1 88.2%, 0.99 91.9%, 1)`
+
+export function BouncySwitch(handle: Handle) {
+  let isOn = true
+
+  return () => (
+    <div
+      mix={[
+        css({
+          height: 160,
+          backgroundColor: '#ff6b35',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+          borderRadius: 50,
+          padding: 10,
+          cursor: 'pointer',
+        }),
+        on('click', () => {
+          isOn = !isOn
+          handle.update()
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            width: 60,
+            height: 60,
+            backgroundColor: 'white',
+            borderRadius: 30,
+            willChange: 'transform',
+          }),
+        ]}
+        style={{
+          transform: isOn ? 'translateY(-100px)' : 'translateY(0)',
+          transition: isOn ? `transform ${spring()}` : `transform 800ms ${bounceEasing}`,
+        }}
+      />
+    </div>
+  )
+}

package/src/animation/demos/color-interpolation.tsx

@@ -0,0 +1,73 @@
+import { css } from '@remix-run/ui'
+
+/*
+ * A comparison of color interpolation methods.
+ *
+ * The "dimming effect" in browser animations happens because sRGB is
+ * gamma-encoded, so linear interpolation passes through desaturated colors.
+ *
+ * The OKLCH box uses the @property hack: register a custom property as <number>,
+ * animate it 0→1, then use color-mix(in oklch, ...) with that number.
+ */
+export function ColorInterpolation() {
+  return () => (
+    <div mix={[css({ display: 'flex', gap: 30, alignItems: 'center', justifyContent: 'center' })]}>
+      <style>
+        {`
+          @property --color-t {
+            syntax: '<number>';
+            inherits: false;
+            initial-value: 0;
+          }
+
+          @keyframes color-t-anim {
+            0%, 100% { --color-t: 0; }
+            50% { --color-t: 1; }
+          }
+
+          .oklch-box {
+            animation: color-t-anim 4s linear infinite;
+            background-color: color-mix(
+              in oklch,
+              #ff0088 calc((1 - var(--color-t)) * 100%),
+              #0d63f8 calc(var(--color-t) * 100%)
+            );
+          }
+        `}
+      </style>
+
+      <div mix={[css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })]}>
+        <div
+          mix={[
+            css({
+              width: 100,
+              height: 100,
+              borderRadius: 8,
+              backgroundColor: '#ff0088',
+              '@keyframes srgb-color': {
+                '0%, 100%': { backgroundColor: '#ff0088' },
+                '50%': { backgroundColor: '#0d63f8' },
+              },
+              animation: 'srgb-color 4s linear infinite',
+            }),
+          ]}
+        />
+        <div mix={[css({ fontSize: 14, color: '#666' })]}>sRGB</div>
+      </div>
+
+      <div mix={[css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 })]}>
+        <div
+          className="oklch-box"
+          mix={[
+            css({
+              width: 100,
+              height: 100,
+              borderRadius: 8,
+            }),
+          ]}
+        />
+        <div mix={[css({ fontSize: 14, color: '#666' })]}>OKLCH</div>
+      </div>
+    </div>
+  )
+}

package/src/animation/demos/cube.tsx

@@ -0,0 +1,116 @@
+import type { Handle } from '@remix-run/ui'
+import { css, ref } from '@remix-run/ui'
+
+export function Cube(handle: Handle) {
+  let cube: HTMLDivElement
+
+  function animate(t: number) {
+    if (handle.signal.aborted) return
+
+    let rotate = Math.sin(t / 10000) * 200
+    let y = (1 + Math.sin(t / 1000)) * -25
+    cube.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`
+
+    requestAnimationFrame(animate)
+  }
+
+  return () => (
+    <div
+      mix={[
+        css({
+          perspective: '400px',
+          width: '100px',
+          height: '100px',
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          ref((node) => {
+            cube = node
+            requestAnimationFrame(animate)
+          }),
+          css({
+            width: '100px',
+            height: '100px',
+            position: 'relative',
+            transformStyle: 'preserve-3d',
+          }),
+        ]}
+      >
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(0deg) translateZ(50px)',
+              backgroundColor: '#ff0055',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(90deg) translateZ(50px)',
+              backgroundColor: '#0099ff',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(180deg) translateZ(50px)',
+              backgroundColor: '#22cc88',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateY(-90deg) translateZ(50px)',
+              backgroundColor: '#ffaa00',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateX(90deg) translateZ(50px)',
+              backgroundColor: '#aa00ff',
+            }),
+          ]}
+        />
+        <div
+          mix={[
+            css({
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              opacity: 0.6,
+              transform: 'rotateX(-90deg) translateZ(50px)',
+              backgroundColor: '#ff00aa',
+            }),
+          ]}
+        />
+      </div>
+    </div>
+  )
+}

package/src/animation/demos/default-animate.tsx

@@ -0,0 +1,129 @@
+import { css, on, type Handle } from '@remix-run/ui'
+import { animateEntrance, animateLayout } from '@remix-run/ui/animation'
+
+let nextId = 1
+function createItem() {
+  return { id: nextId++, label: `Item ${nextId - 1}` }
+}
+
+export function DefaultAnimate(handle: Handle) {
+  let items = [createItem(), createItem()]
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+          width: 200,
+          alignSelf: 'flex-start',
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 8, marginBottom: 8 })]}>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 12px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#10b981',
+              color: 'white',
+              cursor: 'pointer',
+              fontWeight: 500,
+              '&:hover': { backgroundColor: '#059669' },
+            }),
+            on('click', () => {
+              items.unshift(createItem())
+              handle.update()
+            }),
+          ]}
+        >
+          Add
+        </button>
+        <button
+          mix={[
+            css({
+              flex: 1,
+              padding: '8px 12px',
+              border: 'none',
+              borderRadius: 6,
+              backgroundColor: '#6366f1',
+              color: 'white',
+              cursor: 'pointer',
+              fontWeight: 500,
+              '&:hover': { backgroundColor: '#4f46e5' },
+            }),
+            on('click', () => {
+              // Shuffle the array
+              for (let i = items.length - 1; i > 0; i--) {
+                let j = Math.floor(Math.random() * (i + 1))
+                ;[items[i], items[j]] = [items[j], items[i]]
+              }
+              handle.update()
+            }),
+          ]}
+        >
+          Shuffle
+        </button>
+      </div>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          mix={[
+            animateEntrance(),
+            animateLayout(),
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '12px 16px',
+              backgroundColor: '#f1f5f9',
+              borderRadius: 8,
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#334155',
+            }),
+          ]}
+        >
+          <span>{item.label}</span>
+          <button
+            mix={[
+              css({
+                width: 20,
+                height: 20,
+                padding: 0,
+                border: 'none',
+                borderRadius: 4,
+                backgroundColor: 'transparent',
+                color: '#94a3b8',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '&:hover': { backgroundColor: '#e2e8f0', color: '#64748b' },
+              }),
+              on('click', () => {
+                items = items.filter((i) => i.id !== item.id)
+                handle.update()
+              }),
+            ]}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}