@kolkrabbi/kol-component 0.7.0 → 0.8.0

package/src/organisms/ProductDetailLayout.jsx

@@ -1,189 +0,0 @@
-import { useState } from 'react'
-import PriceDisplay from '../atoms/PriceDisplay.jsx'
-import Pill from '../atoms/Pill.jsx'
-import Divider from '../atoms/Divider.jsx'
-import QuantityInput from '../atoms/QuantityInput.jsx'
-import SpecList from '../molecules/SpecList.jsx'
-import TabsRow from '../molecules/TabsRow.jsx'
-import Dropdown from '../molecules/Dropdown.jsx'
-
-/**
- * ProductDetailLayout — the pure two-column PDP skeleton: a full-height media
- * gallery beside a scrollable details column (eyebrow + title + tags, a
- * SpecList of key facts, an underline TabsRow with its panel, then a purchase
- * block of price / size / quantity / CTA / fine print / back link).
- *
- * Presentational and commerce-agnostic — the print-store source's PayPal URL,
- * `print.*` reads, Sanity image normalization and route wiring are all dropped.
- * Data enters through props; the DS parts (PriceDisplay, SpecList, TabsRow,
- * QuantityInput, Dropdown) are composed here, everything else is a slot. Size,
- * quantity and the active tab are owned internally (uncontrolled), seeded from
- * props; pass the change callbacks to observe them.
- *
- * @param {ReactNode[]} mediaItems    gallery frames (rendered nodes, e.g. inline SVG); drives the internal big-frame + thumbnail strip
- * @param {ReactNode}   media         single media slot used when `mediaItems` is empty
- * @param {ReactNode}   eyebrow       category caption above the title (authored verbatim)
- * @param {ReactNode}   title         product name — rendered kol-heading-md (author case at the call site)
- * @param {string[]}    tags          optional Pill row
- * @param {Array<{label,value}>} specs key-facts rows → SpecList
- * @param {Array<{id,label,content}>} tabs tab strip (→ TabsRow) + panel content per tab
- * @param {{amount:number,currency?:string,locale?:string,secondary?:ReactNode}} price → PriceDisplay
- * @param {string[]}    sizeOptions   size <select> options → Dropdown (default ['A3'])
- * @param {string}      defaultSize   initially-selected size (default sizeOptions[0])
- * @param {Function}    onSizeChange  (value) => void — fires on size select
- * @param {number}      defaultQuantity initial qty (default 1)
- * @param {number}      minQuantity   qty floor (default 1)
- * @param {number}      maxQuantity   qty ceiling (default 10)
- * @param {Function}    onQuantityChange (value) => void — fires on qty step
- * @param {ReactNode}   actions       CTA slot — pass the "Add to cart" Button
- * @param {ReactNode}   shippingNote  fine-print line under the CTA
- * @param {ReactNode}   backLink      back-to-catalog link slot
- */
-export default function ProductDetailLayout({
-  mediaItems = [],
-  media,
-  eyebrow,
-  title,
-  tags = [],
-  specs = [],
-  tabs = [],
-  price,
-  sizeOptions = ['A3'],
-  defaultSize,
-  onSizeChange,
-  defaultQuantity = 1,
-  minQuantity = 1,
-  maxQuantity = 10,
-  onQuantityChange,
-  actions,
-  shippingNote,
-  backLink,
-}) {
-  const [activeMedia, setActiveMedia] = useState(0)
-  const [size, setSize] = useState(defaultSize ?? sizeOptions[0])
-  const [quantity, setQuantity] = useState(defaultQuantity)
-  const [activeTab, setActiveTab] = useState(tabs[0]?.id)
-
-  const activeTabItem = tabs.find((t) => t.id === activeTab) ?? tabs[0]
-
-  const handleSize = (value) => {
-    setSize(value)
-    onSizeChange?.(value)
-  }
-  const handleQuantity = (value) => {
-    setQuantity(value)
-    onQuantityChange?.(value)
-  }
-
-  return (
-    <main className="min-h-screen w-full overflow-x-hidden bg-surface-primary text-auto">
-      <section className="grid h-dvh w-full gap-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
-        {/* Media column */}
-        <div className="relative flex h-dvh bg-surface-secondary">
-          <div className="relative flex-1 flex items-center justify-center px-8 py-24 lg:px-16 lg:py-32 overflow-hidden">
-            {mediaItems.length > 0 ? (
-              <div className="flex max-h-full max-w-full items-center justify-center">
-                {mediaItems[activeMedia] ?? mediaItems[0]}
-              </div>
-            ) : (
-              media
-            )}
-
-            {mediaItems.length > 1 && (
-              <div className="absolute inset-x-0 bottom-0 flex gap-3 overflow-x-auto bg-surface-primary/80 px-6 py-4">
-                {mediaItems.map((item, index) => {
-                  const isActive = index === activeMedia
-                  return (
-                    <button
-                      key={index}
-                      type="button"
-                      aria-label={`View image ${index + 1}`}
-                      aria-pressed={isActive}
-                      onClick={() => setActiveMedia(index)}
-                      className={`h-20 aspect-[4/5] overflow-hidden rounded border-2 transition-all ${
-                        isActive
-                          ? 'border-auto opacity-100'
-                          : 'border-transparent opacity-40 hover:opacity-100'
-                      }`}
-                    >
-                      <span className="flex size-full items-center justify-center overflow-hidden">
-                        {item}
-                      </span>
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Details column */}
-        <div className="h-dvh flex flex-col text-left px-6 pt-20 pb-8 sm:px-10 lg:px-16 lg:pt-24 lg:pb-12 bg-surface-primary overflow-y-auto">
-          <div className="mx-auto flex flex-1 w-full max-w-[640px] flex-col gap-6">
-            {/* Header */}
-            <header className="space-y-4">
-              {eyebrow != null && <p className="kol-helper-uc-xs text-accent-primary">{eyebrow}</p>}
-              {title != null && <h1 className="kol-heading-md">{title}</h1>}
-              {tags.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {tags.map((tag) => (
-                    <Pill key={tag} variant="subtle" size="sm">
-                      {tag}
-                    </Pill>
-                  ))}
-                </div>
-              )}
-            </header>
-
-            {/* Specs */}
-            {specs.length > 0 && <SpecList items={specs} framed />}
-
-            {/* Tabs */}
-            {tabs.length > 0 && (
-              <div className="space-y-4">
-                <div className="border-b border-auto">
-                  <TabsRow tabs={tabs.map(({ id, label }) => ({ id, label }))} value={activeTab} onChange={setActiveTab} />
-                </div>
-                <div role="tabpanel" className="kol-mono-text text-fg-64 leading-relaxed space-y-4">
-                  {activeTabItem?.content}
-                </div>
-              </div>
-            )}
-
-            {/* Purchase block */}
-            <div className="mt-auto space-y-6 border-t border-auto pt-6">
-              {price != null && <PriceDisplay {...price} />}
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <span className="kol-helper-uc-xs text-fg-48">Size</span>
-                  <Dropdown
-                    options={sizeOptions.map((s) => ({ label: s, value: s }))}
-                    value={size}
-                    onChange={handleSize}
-                    className="w-full"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <span className="kol-helper-uc-xs text-fg-48">Quantity</span>
-                  <QuantityInput
-                    value={quantity}
-                    onChange={handleQuantity}
-                    min={minQuantity}
-                    max={maxQuantity}
-                    className="w-full"
-                  />
-                </div>
-              </div>
-
-              {actions}
-
-              {shippingNote != null && <p className="kol-mono-xs text-fg-48">{shippingNote}</p>}
-              {backLink}
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  )
-}

package/src/organisms/ScrollDriftGallery.jsx

@@ -1,214 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-gsap.registerPlugin(ScrollTrigger)
-
-const DEFAULT_BG_KEYFRAMES = [
-  { backgroundColor: '#000000', duration: 0 },
-  { backgroundColor: '#0a0a08', duration: 0.15 },
-  { backgroundColor: '#1a1812', duration: 0.3 },
-  { backgroundColor: '#f5f0e8', duration: 0.5 }, // warm cream
-  { backgroundColor: '#e8df00', duration: 0.7 }, // acid yellow
-  { backgroundColor: '#c8ff00', duration: 0.85 }, // electric chartreuse
-  { backgroundColor: '#0a0a0a', duration: 1 }, // back to black
-]
-
-// Deterministic per-index layout — depends only on index + count, so it
-// survives without any per-item data.
-function layoutFor(index, cardSpacing) {
-  const seed = (index * 7 + 3) % 24
-  const row = index % 3
-  const baseY = [8, 35, 62][row] // top / middle / bottom (vh %)
-  const y = baseY + ((seed % 7) - 3) * 3 // ± jitter
-  const scale = [0.7, 1, 0.85, 1.15, 0.75, 0.95, 1.1, 0.8][index % 8]
-  const rotation = ((seed % 5) - 2) * 1.5 // -3..+3 deg
-  const parallaxSpeed = [0.6, 0.8, 1, 1.2, 0.7, 0.9, 1.1, 0.85][index % 8]
-  const x = index * cardSpacing + (seed % 3) * 60 // horizontal slot + jitter
-  const width = scale > 1 ? 400 : scale > 0.85 ? 340 : 280
-  return { x, y, scale, rotation, parallaxSpeed, width, index }
-}
-
-/**
- * ScrollDriftGallery — a pinned hero where vertical scroll scrubs a horizontal
- * track ("The Drift"): the section pins and page-scroll drives (1) the track
- * sideways, (2) each floating card at its own parallax speed, (3) a keyframed
- * background-color journey, (4) a slow-parallax vertical title, and (5) a
- * bottom progress bar. Card geometry (y-row, scale, rotation, x-slot, width) is
- * derived deterministically from index + count; content is a `renderCard` slot.
- *
- * Requires GSAP ScrollTrigger (registered here). All tweens live in a
- * gsap.context reverted on cleanup, with invalidateOnRefresh + function-based
- * end/x so pin distance and travel recompute on resize. On
- * `prefers-reduced-motion` the rig is skipped entirely and the cards render in
- * a plain horizontally-scrollable row.
- *
- * @param {any[]}    items       cards; drives layout count + totalWidth
- * @param {(item:any,meta:{scale,rotation,width,index})=>ReactNode} renderCard card slot
- * @param {Function} onCardClick (item, index) => void — click on a card
- * @param {number}   totalWidth  scroll/scrub distance (default items.length*cardSpacing + 800)
- * @param {ReactNode} title      giant vertical wordmark (content — author case at call site)
- * @param {ReactNode} intro      opening breathing-space slot
- * @param {ReactNode} outro      end-CTA slot
- * @param {Array<{backgroundColor,duration}>} bgKeyframes background-color journey (fractional durations 0→1)
- * @param {number}   cardSpacing horizontal slot pitch, px (default 520)
- */
-export default function ScrollDriftGallery({
-  items = [],
-  renderCard,
-  onCardClick,
-  totalWidth,
-  title,
-  intro,
-  outro,
-  bgKeyframes = DEFAULT_BG_KEYFRAMES,
-  cardSpacing = 520,
-}) {
-  const bgRef = useRef(null)
-  const containerRef = useRef(null)
-  const horizontalRef = useRef(null)
-  const titleRef = useRef(null)
-  const reducedMotion = usePrefersReducedMotion()
-
-  const layout = useMemo(
-    () => items.map((_, i) => layoutFor(i, cardSpacing)),
-    [items, cardSpacing],
-  )
-  const resolvedTotalWidth = totalWidth ?? items.length * cardSpacing + 800
-
-  useEffect(() => {
-    if (reducedMotion) return undefined
-
-    const ctx = gsap.context(() => {
-      const trigger = {
-        trigger: containerRef.current,
-        start: 'top top',
-        end: () => `+=${resolvedTotalWidth}`,
-      }
-
-      // (1) Pin + horizontal scrub.
-      gsap.to(horizontalRef.current, {
-        x: () => -(resolvedTotalWidth - window.innerWidth),
-        ease: 'none',
-        scrollTrigger: { ...trigger, scrub: 1, pin: true, anticipatePin: 1, invalidateOnRefresh: true },
-      })
-
-      // (2) Background-color journey.
-      gsap.to(bgRef.current, { scrollTrigger: { ...trigger, scrub: true }, keyframes: bgKeyframes })
-
-      // (3) Title slow-parallax (0.3× the track).
-      gsap.to(titleRef.current, {
-        x: () => -(resolvedTotalWidth - window.innerWidth) * 0.3,
-        ease: 'none',
-        scrollTrigger: { ...trigger, scrub: 1 },
-      })
-
-      // (4) Per-card parallax.
-      const cards = horizontalRef.current?.querySelectorAll('[data-drift-card]')
-      cards?.forEach((card, i) => {
-        const meta = layout[i]
-        if (!meta) return
-        gsap.to(card, {
-          x: (meta.parallaxSpeed - 1) * 300,
-          ease: 'none',
-          scrollTrigger: { ...trigger, scrub: 1 },
-        })
-      })
-
-      // (5) Progress bar.
-      const bar = containerRef.current?.querySelector('[data-drift-progress]')
-      if (bar) gsap.to(bar, { width: '100%', ease: 'none', scrollTrigger: { ...trigger, scrub: true } })
-    }, containerRef)
-
-    return () => ctx.revert()
-  }, [layout, resolvedTotalWidth, bgKeyframes, reducedMotion])
-
-  // Reduced-motion fallback: plain horizontal scroll, no pin, no gsap.
-  if (reducedMotion) {
-    return (
-      <div style={{ backgroundColor: bgKeyframes[bgKeyframes.length - 1]?.backgroundColor || '#0a0a0a' }}>
-        <section className="relative overflow-hidden py-16">
-          {title != null && (
-            <div className="px-6 pb-8" style={{ writingMode: 'horizontal-tb' }}>
-              <span className="text-[12vw] font-bold tracking-[-0.04em] leading-none opacity-[0.06]">{title}</span>
-            </div>
-          )}
-          <div className="flex items-center gap-8 overflow-x-auto px-6 pb-6">
-            {intro != null && <div className="flex-shrink-0">{intro}</div>}
-            {items.map((item, i) => {
-              const meta = layout[i]
-              return (
-                <div
-                  key={i}
-                  className="flex-shrink-0 cursor-pointer"
-                  style={{ width: `${meta.width}px` }}
-                  onClick={() => onCardClick?.(item, i)}
-                >
-                  {renderCard?.(item, meta)}
-                </div>
-              )
-            })}
-            {outro != null && <div className="flex-shrink-0">{outro}</div>}
-          </div>
-        </section>
-      </div>
-    )
-  }
-
-  return (
-    <div ref={bgRef} style={{ backgroundColor: bgKeyframes[0]?.backgroundColor || '#000000' }} className="transition-colors duration-0">
-      <section ref={containerRef} className="relative h-screen overflow-hidden">
-        {/* Vertical title — pinned, slow parallax */}
-        {title != null && (
-          <div
-            ref={titleRef}
-            className="absolute left-8 top-0 h-full flex items-center z-10 pointer-events-none select-none"
-            style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
-          >
-            <span className="text-[20vw] font-bold tracking-[-0.04em] leading-none opacity-[0.06] mix-blend-difference">{title}</span>
-          </div>
-        )}
-
-        {/* Horizontal track */}
-        <div ref={horizontalRef} className="absolute top-0 left-0 h-full flex items-start" style={{ width: `${resolvedTotalWidth}px` }}>
-          {/* Opening breathing space */}
-          {intro != null && (
-            <div className="flex-shrink-0 w-[50vw] h-full flex items-center justify-center">{intro}</div>
-          )}
-
-          {/* Floating cards */}
-          {layout.map((meta, i) => (
-            <div
-              key={i}
-              data-drift-card
-              className="absolute cursor-pointer group"
-              style={{
-                left: `${meta.x + 600}px`, // offset past the opening space
-                top: `${meta.y}%`,
-                width: `${meta.width}px`,
-                transform: `rotate(${meta.rotation}deg) scale(${meta.scale})`,
-                transformOrigin: 'center center',
-              }}
-              onClick={() => onCardClick?.(items[i], i)}
-            >
-              {renderCard?.(items[i], meta)}
-            </div>
-          ))}
-
-          {/* End CTA */}
-          {outro != null && (
-            <div className="absolute top-1/2 -translate-y-1/2 text-center" style={{ left: `${resolvedTotalWidth - 500}px` }}>
-              {outro}
-            </div>
-          )}
-        </div>
-
-        {/* Progress bar */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-fg-08">
-          <div data-drift-progress className="h-full bg-accent-primary" style={{ width: '0%' }} />
-        </div>
-      </section>
-    </div>
-  )
-}

package/src/organisms/StackHero.jsx

@@ -1,83 +0,0 @@
-import FullBleedHero from './FullBleedHero.jsx'
-import Image from '../molecules/Image.jsx'
-
-/** Per-variant spacing presets — the only delta between StackHero and the
- *  folded-in StackHeroTall (taller viewport + deeper bottom padding). */
-const VARIANTS = {
-  default: { height: 'min-h-[80vh]', padBottom: 'pb-12' },
-  tall: { height: 'min-h-[90vh]', padBottom: 'pb-32 sm:pb-40 lg:pb-48' },
-}
-
-/**
- * StackHero — full-bleed image hero with a bottom-anchored, centered title +
- * description under a bottom-up scrim. Built ON the DS FullBleedHero: the
- * background Image plus a tokenized gradient scrim are handed in as the hero's
- * media node, and the copy rides in the content slot pinned to the bottom.
- * `StackHeroTall` is folded in as `variant="tall"` — a spacing preset, not a
- * second file.
- *
- * De-branded: no CDN `src`/`srcSet` defaults, no brand-copy title/description
- * defaults, no dead `aspectRatio` prop. The scrim reads `--kol-surface-primary`
- * (theme-aware) instead of the hardcoded dark hex, and `objectFit`/
- * `objectPosition` are inline styles (no JIT-invisible dynamic class). The app
- * `reveal` entrance utility is dropped. Title/description authored as-is.
- *
- * @param {string} title           heading text
- * @param {string} description     sub text
- * @param {string} src             background image src
- * @param {string} srcSet          responsive srcSet
- * @param {string} sizes           `sizes` attribute (default '100vw')
- * @param {string} alt             alt text
- * @param {string} objectFit       CSS object-fit for the image (default 'cover')
- * @param {string} objectPosition  CSS object-position for the image (default 'center')
- * @param {'default'|'tall'} variant  spacing preset (default 'default')
- * @param {string} className       extra classes on the hero section
- */
-export default function StackHero({
-  title,
-  description,
-  src,
-  srcSet,
-  sizes = '100vw',
-  alt = '',
-  objectFit = 'cover',
-  objectPosition = 'center',
-  variant = 'default',
-  className = '',
-}) {
-  const { height, padBottom } = VARIANTS[variant] ?? VARIANTS.default
-
-  const media = (
-    <>
-      <Image
-        src={src}
-        srcSet={srcSet}
-        sizes={sizes}
-        alt={alt}
-        loading="eager"
-        className="kol-full-bleed-hero-media"
-        style={{ objectFit, objectPosition }}
-      />
-      <div
-        aria-hidden="true"
-        className="absolute inset-0 pointer-events-none"
-        style={{ background: 'linear-gradient(to top, var(--kol-surface-primary) 0%, transparent 100%)' }}
-      />
-    </>
-  )
-
-  return (
-    <FullBleedHero
-      media={media}
-      height={height}
-      align="center"
-      className={className}
-      panel={
-        <div className={`self-end w-full max-w-[520px] lg:max-w-[30%] text-center mx-auto lg:mx-0 flex flex-col gap-1 ${padBottom}`}>
-          <h1 className="kol-prose-display text-center">{title}</h1>
-          <p className="kol-mono-14 text-center text-fg-80">{description}</p>
-        </div>
-      }
-    />
-  )
-}

package/src/organisms/WorkCard.jsx

@@ -1,120 +0,0 @@
-import { useEffect, useState } from 'react'
-import TiltCard from '../atoms/TiltCard.jsx'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
-
-/* Ragged-skyline heights, chosen by `index % 3` — a shelf of these reads as an
- * uneven horizon. Overridable via the `heights` prop. */
-const HEIGHTS = ['h-[408px] md:h-[560px]', 'h-[372px] md:h-[520px]', 'h-[336px] md:h-[480px]']
-const EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
-const TYPE_LABELS = { client: 'Client', collection: 'Collection', typeface: 'Typeface', tool: 'Tool', system: 'System' }
-
-/**
- * WorkCard — the grid/shelf project tile for a `/work` listing: a fixed-size
- * media card (the DS **TiltCard** in its `grounded` variant) with a
- * hover-revealed bottom drawer carrying the project title + a meta line
- * (client-or-type · year). The whole card is an anchor to the project detail;
- * it preloads its own thumbnail and plays a staggered rise-and-untilt entrance
- * keyed off its `index` in the shelf.
- *
- * Composes TiltCard (owns the `<img>` + pointer tilt); this organism adds the
- * entrance choreography, the caption drawer, and the link. Router-agnostic:
- * renders a plain `<a href>` plus an `onNavigate(href, event)` seam — call
- * `preventDefault` inside it for SPA navigation. Flat project props (no Sanity):
- * the meta line is composed internally so callers pass raw fields.
- *
- * Text casing: no text-transform (KOL rule) — the source's presentational
- * `uppercase` is dropped; `title`, `client`, `year` render verbatim as authored.
- *
- * @param {string}          title       overlay heading (display type)
- * @param {string}          thumbnail   image URL (preloaded, passed to TiltCard `src`); AssetPlaceholder shows when absent
- * @param {string}          href        link target
- * @param {string}          client      first meta segment; falls back to the type label
- * @param {string}          type        'client'|'collection'|'typeface'|'tool'|'system' — mapped via TYPE_LABELS when no client
- * @param {string|number}   year        second meta segment
- * @param {number}          index       drives stagger height + entrance timing (default 0)
- * @param {number}          perspective CSS perspective in px on fine pointers (default 800)
- * @param {string[]}        heights     override the ragged-height ramp (chosen by index % heights.length)
- * @param {Function}        onNavigate  (href, event) => void — anchor click seam for SPA routing
- */
-export default function WorkCard({
-  title,
-  thumbnail,
-  href,
-  client,
-  type,
-  year,
-  index = 0,
-  perspective = 800,
-  heights = HEIGHTS,
-  onNavigate,
-}) {
-  const [ready, setReady] = useState(false)
-  // Evaluated once at mount (SSR-safe): drop perspective on coarse/small screens.
-  const [isMobile] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
-  )
-
-  useEffect(() => {
-    if (!thumbnail) {
-      setReady(true)
-      return
-    }
-    let cancelled = false
-    const img = new window.Image()
-    const done = () => { if (!cancelled) setReady(true) }
-    img.onload = done
-    img.onerror = done
-    img.src = thumbnail
-    return () => { cancelled = true }
-  }, [thumbnail])
-
-  const height = heights[index % heights.length]
-  const meta = [client || TYPE_LABELS[type] || type, year].filter(Boolean).join(' · ')
-
-  const drawer = (
-    <div className="absolute inset-x-0 bottom-0 z-10 p-4 md:p-6 bg-surface-inverse opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-      <p className="kol-sans-display-02 text-fg-inverse leading-tight">{title}</p>
-      {meta && (
-        <p className="kol-mono-12 text-fg-inverse opacity-60 tracking-widest mt-2">{meta}</p>
-      )}
-    </div>
-  )
-
-  return (
-    <a
-      href={href}
-      onClick={onNavigate ? (e) => onNavigate(href, e) : undefined}
-      className={`flex-none w-[280px] md:w-[400px] ${height} group`}
-      style={isMobile ? undefined : { perspective }}
-    >
-      <div
-        className="w-full h-full"
-        style={{
-          transformOrigin: 'bottom center',
-          opacity: ready ? 1 : 0,
-          transform: ready
-            ? 'rotateX(0deg) translateY(0px)'
-            : `rotateX(${20 + (index % 3) * 8}deg) translateY(${30 + (index % 4) * 10}px)`,
-          transition: `opacity ${0.7 + (index % 3) * 0.15}s ${EASE} ${index * 0.07}s, transform ${0.7 + (index % 3) * 0.15}s ${EASE} ${index * 0.07}s`,
-        }}
-      >
-        {thumbnail ? (
-          <TiltCard
-            src={thumbnail}
-            alt={title}
-            variant="grounded"
-            perspective={perspective}
-            className="w-full h-full rounded-[4px] border border-fg-04"
-          >
-            {drawer}
-          </TiltCard>
-        ) : (
-          <div className="relative w-full h-full rounded-[4px] border border-fg-04 overflow-hidden">
-            <AssetPlaceholder category="work" name={title} aspectRatio="auto" className="w-full h-full" />
-            {drawer}
-          </div>
-        )}
-      </div>
-    </a>
-  )
-}