@basementstudio/shader-lab 0.1.0

package/src/components/editor/editor-timeline-overlay.tsx

@@ -0,0 +1,983 @@
+"use client"
+
+import { Select as BaseSelect } from "@base-ui/react/select"
+import {
+  BezierCurveIcon,
+  CaretDownIcon,
+  CaretUpIcon,
+  PauseIcon,
+  PlayIcon,
+  StopIcon,
+} from "@phosphor-icons/react"
+import { motion, useReducedMotion } from "motion/react"
+import {
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { getLayerDefinition } from "@/lib/editor/config/layer-registry"
+import type {
+  AnimatedPropertyBinding,
+  EditorLayer,
+  ParameterDefinition,
+  TimelineInterpolation,
+  TimelineTrack,
+} from "@/types/editor"
+import { TIMELINE_INTERPOLATIONS } from "@/types/editor"
+import { cn } from "@/lib/cn"
+import { GlassPanel } from "@/components/ui/glass-panel"
+import { IconButton } from "@/components/ui/icon-button"
+import { Typography } from "@/components/ui/typography"
+import { useEditorStore, useLayerStore, useTimelineStore } from "@/store"
+import {
+  createLayerPropertyBinding,
+  createParamBinding,
+} from "@/store/timeline-store"
+
+type TimelinePropertyItem = {
+  binding: AnimatedPropertyBinding
+  color: string
+  id: string
+  kind: "layer" | "param"
+  label: string
+  track: TimelineTrack | null
+}
+
+type DragState =
+  | {
+      type: "keyframe"
+      keyframeId: string
+      trackId: string
+    }
+  | {
+      type: "playhead"
+    }
+
+const GENERAL_TIMELINE_PROPERTIES = [
+  { color: "#8DB1FF", property: "opacity" },
+  { color: "#A4E0A0", property: "hue" },
+  { color: "#F7B365", property: "saturation" },
+] as const
+
+const COLLAPSED_SHELL_HEIGHT = 52
+const COLLAPSED_SHELL_WIDTH = 580
+const EXPANDED_SHELL_HEIGHT = 380
+const EXPANDED_SHELL_WIDTH = 820
+const INTERPOLATION_OPTIONS = TIMELINE_INTERPOLATIONS.map((value) => ({
+  label: value[0]?.toUpperCase() + value.slice(1),
+  value,
+}))
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+function formatSeconds(value: number): string {
+  const safeValue = Number.isFinite(value) ? value : 0
+  return `${safeValue.toFixed(2)}s`
+}
+
+function hexToRgbChannels(value: string): string {
+  const normalized = value.replace("#", "")
+
+  if (normalized.length !== 6) {
+    return "122 162 255"
+  }
+
+  const red = Number.parseInt(normalized.slice(0, 2), 16)
+  const green = Number.parseInt(normalized.slice(2, 4), 16)
+  const blue = Number.parseInt(normalized.slice(4, 6), 16)
+
+  return `${red} ${green} ${blue}`
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)
+}
+
+function getPropertyId(binding: AnimatedPropertyBinding): string {
+  if (binding.kind === "layer") {
+    return `layer:${binding.property}`
+  }
+
+  return `param:${binding.key}`
+}
+
+function getVisibleParams(layer: EditorLayer): ParameterDefinition[] {
+  const definition = getLayerDefinition(layer.type)
+
+  return definition.params.filter((entry) => {
+    if (!entry.visibleWhen) {
+      return true
+    }
+
+    const controllingValue =
+      layer.params[entry.visibleWhen.key] ??
+      definition.params.find((param) => param.key === entry.visibleWhen?.key)
+        ?.defaultValue
+
+    if ("equals" in entry.visibleWhen) {
+      return controllingValue === entry.visibleWhen.equals
+    }
+
+    return (
+      typeof controllingValue === "number" &&
+      controllingValue >= entry.visibleWhen.gte
+    )
+  })
+}
+
+function buildTimelineProperties(
+  layer: EditorLayer | null,
+  tracks: TimelineTrack[]
+): TimelinePropertyItem[] {
+  if (!layer) {
+    return []
+  }
+
+  const properties: TimelinePropertyItem[] = GENERAL_TIMELINE_PROPERTIES.map(
+    (entry) => {
+      const binding = createLayerPropertyBinding(entry.property)
+      const id = getPropertyId(binding)
+
+      return {
+        binding,
+        color: entry.color,
+        id,
+        kind: "layer",
+        label: binding.label,
+        track:
+          tracks.find(
+            (track) =>
+              track.layerId === layer.id && getPropertyId(track.binding) === id
+          ) ?? null,
+      }
+    }
+  )
+
+  for (const definition of getVisibleParams(layer)) {
+    const binding = createParamBinding(layer, definition.key)
+
+    if (!binding) {
+      continue
+    }
+
+    const id = getPropertyId(binding)
+    properties.push({
+      binding,
+      color: definition.type === "color" ? "#FF8CAB" : "#B697FF",
+      id,
+      kind: "param",
+      label: definition.label,
+      track:
+        tracks.find(
+          (track) =>
+            track.layerId === layer.id && getPropertyId(track.binding) === id
+        ) ?? null,
+    })
+  }
+
+  return properties
+}
+
+function getMajorTickStep(duration: number): number {
+  if (duration <= 6) {
+    return 1
+  }
+
+  if (duration <= 12) {
+    return 2
+  }
+
+  if (duration <= 30) {
+    return 5
+  }
+
+  if (duration <= 60) {
+    return 10
+  }
+
+  return 20
+}
+
+function createTickPositions(duration: number) {
+  const safeDuration = Math.max(duration, 0.25)
+  const majorStep = getMajorTickStep(safeDuration)
+  const minorStep = majorStep / 4
+  const majorTicks: number[] = []
+  const minorTicks: number[] = []
+
+  for (
+    let current = 0;
+    current <= safeDuration + Number.EPSILON;
+    current += majorStep
+  ) {
+    majorTicks.push(Number(current.toFixed(3)))
+  }
+
+  if (majorTicks[majorTicks.length - 1] !== safeDuration) {
+    majorTicks.push(safeDuration)
+  }
+
+  for (
+    let current = 0;
+    current <= safeDuration + Number.EPSILON;
+    current += minorStep
+  ) {
+    const normalized = Number(current.toFixed(3))
+    if (!majorTicks.some((tick) => Math.abs(tick - normalized) < 0.001)) {
+      minorTicks.push(normalized)
+    }
+  }
+
+  return { majorTicks, minorTicks }
+}
+
+function TimelineTransport({
+  currentTime,
+  duration,
+  expanded,
+  isPlaying,
+  loop,
+  onDurationChange,
+  onStop,
+  onToggleExpanded,
+  onToggleLoop,
+  onTogglePlaying,
+}: {
+  currentTime: number
+  duration: number
+  expanded: boolean
+  isPlaying: boolean
+  loop: boolean
+  onDurationChange: (value: number) => void
+  onStop: () => void
+  onToggleExpanded: () => void
+  onToggleLoop: () => void
+  onTogglePlaying: () => void
+}) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-2",
+        expanded ? "min-h-[31px]" : "min-h-7"
+      )}
+    >
+      <div className="inline-flex items-center gap-1">
+        <IconButton
+          aria-label={isPlaying ? "Pause playback" : "Play timeline"}
+          className="h-7 w-7"
+          onClick={onTogglePlaying}
+          variant="default"
+        >
+          {isPlaying ? (
+            <PauseIcon size={14} weight="fill" />
+          ) : (
+            <PlayIcon size={14} weight="fill" />
+          )}
+        </IconButton>
+        <IconButton
+          aria-label="Stop playback"
+          className="h-7 w-7"
+          onClick={onStop}
+          variant="default"
+        >
+          <StopIcon size={14} weight="fill" />
+        </IconButton>
+      </div>
+
+      <span
+        aria-hidden="true"
+        className="block h-4 w-px shrink-0 rounded-full bg-[var(--ds-border-divider)]"
+      />
+
+      <div className="inline-flex items-center gap-1">
+        <IconButton
+          aria-label={loop ? "Disable loop" : "Enable loop"}
+          className={cn(
+            "h-7 w-auto gap-1.5 px-[10px]",
+            loop && "bg-white/12 text-[var(--ds-color-text-primary)]"
+          )}
+          onClick={onToggleLoop}
+          variant={loop ? "active" : "default"}
+        >
+          <Typography as="span" tone="secondary" variant="monoSm">
+            Loop
+          </Typography>
+        </IconButton>
+      </div>
+
+      <span
+        aria-hidden="true"
+        className="block h-4 w-px shrink-0 rounded-full bg-[var(--ds-border-divider)]"
+      />
+
+      <div className="inline-flex items-center gap-2">
+        <Typography as="span" tone="secondary" variant="monoSm">
+          Duration
+        </Typography>
+        <input
+          aria-label="Timeline duration in seconds"
+          className="min-h-7 w-[72px] appearance-none rounded-[var(--ds-radius-icon)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-[10px] text-center font-[var(--ds-font-mono)] text-[12px] leading-4 text-[var(--ds-color-text-primary)] outline-none transition-[background-color,border-color] duration-160 ease-[var(--ease-out-cubic)] focus:border-[var(--ds-border-hover)]"
+          max={120}
+          min={0.25}
+          onChange={(event) => {
+            const nextValue = event.currentTarget.valueAsNumber
+
+            if (Number.isFinite(nextValue)) {
+              onDurationChange(nextValue)
+            }
+          }}
+          step={0.25}
+          type="number"
+          value={duration.toFixed(2)}
+        />
+        <Typography
+          as="span"
+          className="whitespace-nowrap"
+          tone="secondary"
+          variant="monoSm"
+        >
+          sec
+        </Typography>
+      </div>
+
+      <div className="inline-flex min-w-0 flex-1 items-center justify-end gap-1">
+        <Typography
+          as="span"
+          className="min-w-[104px] whitespace-nowrap text-right"
+          tone="secondary"
+          variant="monoMd"
+        >
+          {formatSeconds(currentTime)} / {formatSeconds(duration)}
+        </Typography>
+        <IconButton
+          aria-label={
+            expanded ? "Collapse timeline panel" : "Expand timeline panel"
+          }
+          className="h-7 w-7"
+          onClick={onToggleExpanded}
+          variant="default"
+        >
+          {expanded ? (
+            <CaretDownIcon size={14} weight="bold" />
+          ) : (
+            <CaretUpIcon size={14} weight="bold" />
+          )}
+        </IconButton>
+      </div>
+    </div>
+  )
+}
+
+export function EditorTimelineOverlay() {
+  const reduceMotion = useReducedMotion() ?? false
+  const immersiveCanvas = useEditorStore((state) => state.immersiveCanvas)
+  const timelinePanelOpen = useEditorStore((state) => state.timelinePanelOpen)
+  const closeTimelinePanel = useEditorStore((state) => state.closeTimelinePanel)
+  const toggleTimelinePanel = useEditorStore(
+    (state) => state.toggleTimelinePanel
+  )
+  const selectedLayerId = useLayerStore((state) => state.selectedLayerId)
+  const selectedLayer = useLayerStore((state) =>
+    selectedLayerId
+      ? (state.layers.find((layer) => layer.id === selectedLayerId) ?? null)
+      : null
+  )
+
+  const currentTime = useTimelineStore((state) => state.currentTime)
+  const duration = useTimelineStore((state) => state.duration)
+  const isPlaying = useTimelineStore((state) => state.isPlaying)
+  const loop = useTimelineStore((state) => state.loop)
+  const selectedTrackId = useTimelineStore((state) => state.selectedTrackId)
+  const selectedKeyframeId = useTimelineStore(
+    (state) => state.selectedKeyframeId
+  )
+  const tracks = useTimelineStore((state) => state.tracks)
+  const setCurrentTime = useTimelineStore((state) => state.setCurrentTime)
+  const setDuration = useTimelineStore((state) => state.setDuration)
+  const setLoop = useTimelineStore((state) => state.setLoop)
+  const setSelected = useTimelineStore((state) => state.setSelected)
+  const setTrackInterpolation = useTimelineStore(
+    (state) => state.setTrackInterpolation
+  )
+  const setKeyframeTime = useTimelineStore((state) => state.setKeyframeTime)
+  const removeKeyframe = useTimelineStore((state) => state.removeKeyframe)
+  const stop = useTimelineStore((state) => state.stop)
+  const togglePlaying = useTimelineStore((state) => state.togglePlaying)
+
+  const layerTracks = useMemo(
+    () =>
+      selectedLayer
+        ? tracks.filter((track) => track.layerId === selectedLayer.id)
+        : [],
+    [selectedLayer, tracks]
+  )
+  const properties = useMemo(
+    () => buildTimelineProperties(selectedLayer, tracks),
+    [selectedLayer, tracks]
+  )
+  const animatedProperties = useMemo(
+    () => properties.filter((entry) => entry.track),
+    [properties]
+  )
+  const [focusedPropertyId, setFocusedPropertyId] = useState<string | null>(
+    null
+  )
+  const scrubSurfaceRef = useRef<HTMLDivElement | null>(null)
+  const [dragState, setDragState] = useState<DragState | null>(null)
+  const [viewportSize, setViewportSize] = useState({ height: 900, width: 1440 })
+  const tickPositions = useMemo(() => createTickPositions(duration), [duration])
+
+  useEffect(() => {
+    if (!(timelinePanelOpen && selectedLayer)) {
+      return
+    }
+
+    const selectedTrack =
+      layerTracks.find((track) => track.id === selectedTrackId) ?? null
+
+    if (selectedTrack) {
+      const nextPropertyId = getPropertyId(selectedTrack.binding)
+      if (focusedPropertyId !== nextPropertyId) {
+        setFocusedPropertyId(nextPropertyId)
+      }
+      return
+    }
+
+    if (
+      focusedPropertyId &&
+      properties.some((entry) => entry.id === focusedPropertyId)
+    ) {
+      return
+    }
+
+    const firstAnimatedTrack = animatedProperties[0]?.track ?? null
+
+    if (firstAnimatedTrack) {
+      setSelected(firstAnimatedTrack.id)
+      setFocusedPropertyId(getPropertyId(firstAnimatedTrack.binding))
+      return
+    }
+
+    setFocusedPropertyId(properties[0]?.id ?? null)
+  }, [
+    animatedProperties,
+    focusedPropertyId,
+    layerTracks,
+    properties,
+    selectedLayer,
+    selectedTrackId,
+    setSelected,
+    timelinePanelOpen,
+  ])
+
+  useEffect(() => {
+    const updateViewportSize = () => {
+      setViewportSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      })
+    }
+
+    updateViewportSize()
+    window.addEventListener("resize", updateViewportSize)
+
+    return () => {
+      window.removeEventListener("resize", updateViewportSize)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!timelinePanelOpen) {
+      return
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        (event.key === "Backspace" || event.key === "Delete") &&
+        selectedTrackId &&
+        selectedKeyframeId &&
+        !isEditableTarget(event.target)
+      ) {
+        event.preventDefault()
+        removeKeyframe(selectedTrackId, selectedKeyframeId)
+        return
+      }
+
+      if (event.key === "Escape") {
+        closeTimelinePanel()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [
+    closeTimelinePanel,
+    removeKeyframe,
+    selectedKeyframeId,
+    selectedTrackId,
+    timelinePanelOpen,
+  ])
+
+  const getTimeFromClientX = useEffectEvent((clientX: number) => {
+    const surface = scrubSurfaceRef.current
+
+    if (!surface) {
+      return currentTime
+    }
+
+    const rect = surface.getBoundingClientRect()
+    const progress =
+      rect.width > 0 ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0
+    return progress * duration
+  })
+
+  const handleDragMove = useEffectEvent((event: PointerEvent) => {
+    if (!dragState) {
+      return
+    }
+
+    const nextTime = getTimeFromClientX(event.clientX)
+
+    if (dragState.type === "playhead") {
+      setCurrentTime(nextTime)
+      return
+    }
+
+    setKeyframeTime(dragState.trackId, dragState.keyframeId, nextTime)
+  })
+
+  const handleDragEnd = useEffectEvent(() => {
+    setDragState(null)
+  })
+
+  useEffect(() => {
+    if (!dragState) {
+      return
+    }
+
+    window.addEventListener("pointermove", handleDragMove)
+    window.addEventListener("pointerup", handleDragEnd)
+    window.addEventListener("pointercancel", handleDragEnd)
+
+    return () => {
+      window.removeEventListener("pointermove", handleDragMove)
+      window.removeEventListener("pointerup", handleDragEnd)
+      window.removeEventListener("pointercancel", handleDragEnd)
+    }
+  }, [dragState])
+
+  if (immersiveCanvas) {
+    return null
+  }
+
+  const selectedTrack =
+    layerTracks.find((track) => track.id === selectedTrackId) ?? null
+  const progress = duration > 0 ? clamp(currentTime / duration, 0, 1) : 0
+  const shellWidth = timelinePanelOpen
+    ? Math.min(EXPANDED_SHELL_WIDTH, Math.max(640, viewportSize.width - 96))
+    : Math.min(COLLAPSED_SHELL_WIDTH, Math.max(360, viewportSize.width - 48))
+  const shellHeight = timelinePanelOpen
+    ? Math.min(EXPANDED_SHELL_HEIGHT, Math.max(220, viewportSize.height - 268))
+    : COLLAPSED_SHELL_HEIGHT
+  const expandedBodyHeight = Math.max(0, shellHeight - COLLAPSED_SHELL_HEIGHT)
+
+  const handleScrubStart = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setCurrentTime(getTimeFromClientX(event.clientX))
+    setDragState({ type: "playhead" })
+  }
+
+  let panelBodyAnimation: {
+    height: number
+    opacity: number
+    y?: number
+  }
+
+  if (timelinePanelOpen) {
+    panelBodyAnimation = reduceMotion
+      ? { height: expandedBodyHeight, opacity: 1 }
+      : { height: expandedBodyHeight, opacity: 1, y: 0 }
+  } else {
+    panelBodyAnimation = reduceMotion
+      ? { height: 0, opacity: 0 }
+      : { height: 0, opacity: 0, y: 8 }
+  }
+
+  return (
+    <div className="pointer-events-none fixed right-0 bottom-3 left-0 z-35 flex justify-center">
+      <motion.div
+        animate={
+          reduceMotion
+            ? { height: shellHeight, opacity: 1, width: shellWidth }
+            : { height: shellHeight, opacity: 1, width: shellWidth, y: 0 }
+        }
+        className="pointer-events-auto mx-auto max-h-[min(380px,calc(100vh-268px))] origin-bottom"
+        initial={false}
+        transition={
+          reduceMotion
+            ? { duration: 0.14, ease: "easeOut" }
+            : {
+                damping: 34,
+                mass: 0.95,
+                stiffness: 280,
+                type: "spring",
+              }
+        }
+      >
+        <GlassPanel
+          className="pointer-events-auto flex h-full max-h-inherit w-full flex-col overflow-hidden"
+          variant="panel"
+        >
+          <div
+            className={cn(
+              "border-b border-[var(--ds-border-divider)] p-2 transition-[border-color] duration-160 ease-[var(--ease-out-cubic)]",
+              !timelinePanelOpen && "border-b-transparent"
+            )}
+          >
+            <TimelineTransport
+              currentTime={currentTime}
+              duration={duration}
+              expanded={timelinePanelOpen}
+              isPlaying={isPlaying}
+              loop={loop}
+              onDurationChange={setDuration}
+              onStop={stop}
+              onToggleExpanded={toggleTimelinePanel}
+              onToggleLoop={() => setLoop(!loop)}
+              onTogglePlaying={togglePlaying}
+            />
+          </div>
+
+          <motion.div
+            animate={panelBodyAnimation}
+            className="flex min-h-0 flex-1 overflow-hidden"
+            initial={false}
+            transition={
+              reduceMotion
+                ? { duration: 0.12, ease: "easeOut" }
+                : {
+                    damping: 34,
+                    delay: timelinePanelOpen ? 0.04 : 0,
+                    mass: 0.78,
+                    stiffness: 320,
+                    type: "spring",
+                  }
+            }
+          >
+            <div
+              aria-hidden={!timelinePanelOpen}
+              className={cn(
+                "flex h-full min-h-0 flex-1 overflow-hidden",
+                !timelinePanelOpen && "pointer-events-none"
+              )}
+            >
+              <div className="flex h-full min-h-0 shrink-0 basis-[180px] flex-col gap-4 overflow-y-auto border-r border-[var(--ds-border-divider)] px-3 pt-[10px] pb-3 [scrollbar-gutter:stable]">
+                <div className="flex flex-col gap-[10px]">
+                  <Typography
+                    className="tracking-[0.08em] uppercase"
+                    tone="secondary"
+                    variant="overline"
+                  >
+                    Properties
+                  </Typography>
+
+                  <div className="flex flex-col gap-1.5">
+                    {properties.length > 0 ? (
+                      properties.map((entry) => {
+                        const isFocused = focusedPropertyId === entry.id
+                        const hasTrack = Boolean(entry.track)
+
+                        return (
+                          <button
+                            className={cn(
+                              "flex min-h-8 items-center gap-[10px] rounded-[10px] border border-transparent px-[10px] text-left transition-[background-color,border-color,color,transform] duration-160 ease-[var(--ease-out-cubic)] hover:bg-white/4 hover:border-white/5 active:scale-[0.995]",
+                              isFocused && "border-white/8 bg-white/8",
+                              hasTrack
+                                ? "text-[var(--ds-color-text-primary)]"
+                                : "text-[var(--ds-color-text-muted)]"
+                            )}
+                            key={entry.id}
+                            onClick={() => {
+                              setFocusedPropertyId(entry.id)
+
+                              if (entry.track) {
+                                setSelected(entry.track.id)
+                              } else {
+                                setSelected(null)
+                              }
+                            }}
+                            type="button"
+                          >
+                            <div className="flex min-w-0 items-center gap-2">
+                              <span
+                                aria-hidden="true"
+                                className="h-2 w-2 shrink-0 rounded-full shadow-[0_0_0_1px_rgb(255_255_255_/_0.08)]"
+                                style={{ backgroundColor: entry.color }}
+                              />
+                              <Typography
+                                as="span"
+                                className="min-w-0"
+                                tone={hasTrack ? "primary" : "muted"}
+                                variant="monoSm"
+                              >
+                                {entry.label}
+                              </Typography>
+                            </div>
+                            <span
+                              aria-hidden="true"
+                              className={cn(
+                                "inline-flex h-[7px] w-[7px] shrink-0 rounded-full",
+                                hasTrack
+                                  ? "bg-[rgb(var(--timeline-track-rgb,122_162_255)_/_0.9)] shadow-[0_0_10px_rgb(var(--timeline-track-rgb,122_162_255)_/_0.35)]"
+                                  : "bg-white/14"
+                              )}
+                              style={
+                                hasTrack
+                                  ? ({
+                                      "--timeline-track-rgb": hexToRgbChannels(
+                                        entry.color
+                                      ),
+                                    } as CSSProperties)
+                                  : undefined
+                              }
+                            />
+                          </button>
+                        )
+                      })
+                    ) : (
+                      <Typography tone="muted" variant="caption">
+                        Select a layer to inspect its timeline properties.
+                      </Typography>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+                <div
+                  className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+                  onPointerDown={handleScrubStart}
+                  ref={scrubSurfaceRef}
+                >
+                  <div className="relative basis-[30px] border-b border-[var(--ds-border-divider)]">
+                    {tickPositions.minorTicks.map((tick) => (
+                      <span
+                        aria-hidden="true"
+                        className="absolute bottom-0 w-px bg-white/6 h-[10px]"
+                        key={`minor-${tick}`}
+                        style={{ left: `${(tick / duration) * 100}%` }}
+                      />
+                    ))}
+
+                    {tickPositions.majorTicks.map((tick) => (
+                      <span
+                        aria-hidden="true"
+                        className="absolute bottom-0 h-[18px] w-px bg-white/14"
+                        key={`major-${tick}`}
+                        style={{ left: `${(tick / duration) * 100}%` }}
+                      />
+                    ))}
+
+                    {tickPositions.majorTicks.map((tick) => (
+                      <Typography
+                        as="span"
+                        className="absolute top-1 left-0 -translate-x-1/2 whitespace-nowrap"
+                        key={`label-${tick}`}
+                        tone="muted"
+                        variant="monoXs"
+                        style={{ left: `${(tick / duration) * 100}%` }}
+                      >
+                        {tick.toFixed(1)}
+                      </Typography>
+                    ))}
+                  </div>
+
+                  <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto">
+                    {animatedProperties.length > 0 ? (
+                      animatedProperties.map((entry) => {
+                        const track = entry.track
+
+                        if (!track) {
+                          return null
+                        }
+
+                        const isFocused = focusedPropertyId === entry.id
+
+                        return (
+                          <div
+                            className={cn(
+                              "relative basis-[46px] border-b border-white/4 bg-[linear-gradient(90deg,rgb(255_255_255_/_0.02)_0%,rgb(255_255_255_/_0.015)_100%)]",
+                              isFocused &&
+                                "bg-[linear-gradient(90deg,rgb(var(--timeline-track-rgb,122_162_255)_/_0.12)_0%,rgb(var(--timeline-track-rgb,122_162_255)_/_0.03)_42%,rgb(255_255_255_/_0.02)_100%)]"
+                            )}
+                            key={track.id}
+                            style={
+                              {
+                                "--timeline-track-rgb": hexToRgbChannels(
+                                  entry.color
+                                ),
+                              } as CSSProperties
+                            }
+                          >
+                            <div
+                              className={cn(
+                                "absolute top-[22px] right-0 left-0 h-0.5 rounded-full bg-[rgb(var(--timeline-track-rgb,122_162_255)_/_0.18)]",
+                                !track.enabled && "opacity-40"
+                              )}
+                            />
+                            {track.keyframes.map((keyframe) => (
+                              <button
+                                aria-label={`Keyframe at ${formatSeconds(keyframe.time)}`}
+                                className="group absolute top-[11px] inline-flex h-[22px] w-[22px] -translate-x-1/2 items-center justify-center bg-transparent p-0 text-inherit cursor-grab active:cursor-grabbing"
+                                data-selected={selectedKeyframeId === keyframe.id}
+                                key={keyframe.id}
+                                onPointerDown={(event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  setFocusedPropertyId(entry.id)
+                                  setSelected(track.id, keyframe.id)
+                                  setDragState({
+                                    keyframeId: keyframe.id,
+                                    trackId: track.id,
+                                    type: "keyframe",
+                                  })
+                                }}
+                                style={{
+                                  left: `${(keyframe.time / duration) * 100}%`,
+                                }}
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className={cn(
+                                    "h-[11px] w-[11px] rounded-[4px] border border-white/40 bg-[rgb(var(--timeline-track-rgb,122_162_255)_/_0.95)] shadow-[0_4px_10px_rgb(0_0_0_/_0.22)] rotate-45 transition-[box-shadow,transform] duration-160 ease-[var(--ease-out-cubic)] group-hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.24),0_6px_14px_rgb(0_0_0_/_0.28)]",
+                                    selectedKeyframeId === keyframe.id &&
+                                      "bg-[rgb(var(--timeline-track-rgb,122_162_255)_/_1)] scale-[1.12]"
+                                  )}
+                                />
+                              </button>
+                            ))}
+                          </div>
+                        )
+                      })
+                    ) : (
+                      <div className="pointer-events-none absolute inset-x-0 top-[30px] flex items-start justify-center">
+                        <div className="flex max-w-[320px] flex-col gap-1.5 px-[18px] py-4 text-center">
+                          <Typography
+                            align="center"
+                            variant="caption"
+                            className="text-balance"
+                          >
+                            Add your first keyframe from the properties panel.
+                          </Typography>
+                        </div>
+                      </div>
+                    )}
+
+                    <div
+                      className="pointer-events-none absolute top-0 bottom-0 w-0 -translate-x-1/2"
+                      style={{ left: `${progress * 100}%` }}
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="pointer-events-auto absolute top-0 left-1/2 h-[14px] w-[14px] -translate-x-1/2 rounded-[4px] bg-white/96 shadow-[0_8px_18px_rgb(0_0_0_/_0.28)]"
+                        onPointerDown={(event) => {
+                          event.preventDefault()
+                          event.stopPropagation()
+                          setDragState({ type: "playhead" })
+                        }}
+                      />
+                      <div
+                        aria-hidden="true"
+                        className="absolute top-3 bottom-0 left-1/2 w-px -translate-x-1/2 bg-[linear-gradient(180deg,rgb(255_255_255_/_0.95)_0%,rgb(255_255_255_/_0.62)_100%)]"
+                      />
+                    </div>
+                  </div>
+
+                </div>
+
+                {selectedTrack ? (
+                  <div
+                    className="pointer-events-auto absolute right-3 bottom-3 z-4 inline-flex"
+                    onPointerDown={(event) => {
+                      event.stopPropagation()
+                    }}
+                  >
+                    <BaseSelect.Root
+                      items={INTERPOLATION_OPTIONS}
+                      modal={false}
+                      onValueChange={(value) => {
+                        if (value) {
+                          setTrackInterpolation(
+                            selectedTrack.id,
+                            value as TimelineInterpolation
+                          )
+                        }
+                      }}
+                      value={selectedTrack.interpolation}
+                    >
+                      <BaseSelect.Trigger
+                        aria-label="Track easing"
+                        className="inline-flex h-7 w-7 items-center justify-center rounded-[var(--ds-radius-icon)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] text-[var(--ds-color-text-secondary)] transition-[background-color,border-color,color,transform] duration-160 ease-[var(--ease-out-cubic)] hover:bg-white/8 hover:border-[var(--ds-border-hover)] active:scale-[0.96] data-[popup-open]:bg-white/8 data-[popup-open]:border-[var(--ds-border-hover)] data-[popup-open]:text-[var(--ds-color-text-primary)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-border-active)]"
+                        onPointerDown={(event) => {
+                          event.stopPropagation()
+                        }}
+                      >
+                        <BezierCurveIcon size={14} weight="bold" />
+                      </BaseSelect.Trigger>
+
+                      <BaseSelect.Portal>
+                        <BaseSelect.Positioner
+                          align="end"
+                          alignItemWithTrigger={false}
+                          className="z-50 outline-none"
+                          side="top"
+                          sideOffset={10}
+                        >
+                          <BaseSelect.Popup className="min-w-[132px] overflow-hidden rounded-[12px] border border-[var(--ds-border-panel)] bg-[rgb(18_18_22_/_0.82)] shadow-[var(--ds-shadow-panel-dark)] backdrop-blur-[24px]">
+                            <BaseSelect.List className="flex flex-col gap-0.5 p-1">
+                              {INTERPOLATION_OPTIONS.map((option) => (
+                                <BaseSelect.Item
+                                  className="cursor-pointer rounded-[var(--ds-radius-icon)] px-[10px] py-[6px] text-[var(--ds-color-text-secondary)] outline-none transition-[background-color,color] duration-140 ease-[var(--ease-out-cubic)] data-[highlighted]:bg-[var(--ds-color-surface-active)] data-[selected]:bg-[var(--ds-color-surface-active)] data-[highlighted]:text-[var(--ds-color-text-primary)] data-[selected]:text-[var(--ds-color-text-primary)]"
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  <BaseSelect.ItemText
+                                    className="block font-[var(--ds-font-mono)] text-[11px] leading-[14px]"
+                                  >
+                                    {option.label}
+                                  </BaseSelect.ItemText>
+                                </BaseSelect.Item>
+                              ))}
+                            </BaseSelect.List>
+                          </BaseSelect.Popup>
+                        </BaseSelect.Positioner>
+                      </BaseSelect.Portal>
+                    </BaseSelect.Root>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </motion.div>
+        </GlassPanel>
+      </motion.div>
+    </div>
+  )
+}