Clere Radiance: 30s spot, product viz R&D loop

- Main video: 30s CTA spot (ProRes master re-encoded to 7.4 MB H.264)
- New 'loops' project field: silent autoplaying clips with a caption;
  used for the square product visualisation R&D render (1.9 MB)
- Poster and gallery stills from the spot; summary/credits updated
- Ignore .mov masters in content/

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitignore

@@ -46,3 +46,6 @@ content/*.pdf
 
 # source copies of screen markers (served from public/set/markers)
 content/screen_markers/
+
+# video masters
+content/*.mov

app/(site)/work/[slug]/page.tsx

@@ -83,6 +83,29 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
         </div>
       )}
 
+      {project.loops?.map((loop) => (
+        <section
+          key={loop.src}
+          className="mx-auto mt-16 grid max-w-7xl items-center gap-8 px-5 md:mt-24 md:grid-cols-2 md:gap-16 md:px-8"
+        >
+          <video
+            src={loop.src}
+            poster={loop.poster}
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            className="w-full bg-ink-2"
+            style={{ aspectRatio: loop.aspect }}
+          />
+          <div>
+            <p className="font-mono text-xs tracking-[0.3em] text-accent uppercase">{loop.title}</p>
+            <p className="mt-4 text-lg leading-relaxed font-light text-muted md:text-xl">{loop.caption}</p>
+          </div>
+        </section>
+      ))}
+
       <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 md:grid-cols-[1fr_2fr] md:px-8 md:py-28">
         <dl className="grid grid-cols-2 gap-6 self-start md:grid-cols-1">
           {meta.map((m) => (

content/site.ts

@@ -153,6 +153,8 @@ export type Project = {
   // MP4 under /public, or a Vimeo/YouTube embed URL.
   video?: string;
   gallery?: string[];
+  // Silent looping clips shown in their own section (e.g. lookdev / R&D renders).
+  loops?: { src: string; poster: string; title: string; caption: string; aspect: string }[];
   credits: string[];
   // Accent hue (0-360) for the generated frame shown when there is no image.
   hue: number;
@@ -213,11 +215,23 @@ export const projects: Project[] = [
     client: "Clere",
     // TODO: confirm year.
     year: 2024,
-    category: "Product Visualisation",
+    category: "Commercial",
     summary:
-      "Photoreal CG product visualisation for Clere’s Radiance Night Re-Newer.",
-    image: "/capabilities/product-viz.jpg",
-    credits: ["Product Visualisation", "Lookdev", "Lighting"],
+      "A 30-second spot launching Clere Radiance’s four-step routine. The product shots are CG: photoreal face wash, toner, cream and night re-newer, built, lit and animated in 3D, and cut together with the live-action beauty footage and the campaign’s motion graphics.",
+    image: "/work/clere-radiance/poster.jpg",
+    video: "/work/clere-radiance/clere-radiance-30s.mp4",
+    gallery: ["/work/clere-radiance/still-range.jpg", "/work/clere-radiance/still-results.jpg"],
+    loops: [
+      {
+        src: "/work/clere-radiance/clere-product-rnd.mp4",
+        poster: "/work/clere-radiance/rnd-poster.jpg",
+        title: "Product visualisation R&D",
+        caption:
+          "Lookdev test for the Radiance range: glass, frosted plastic and printed labels under one lighting rig, with the animated platform that carries the products through the spot.",
+        aspect: "1 / 1",
+      },
+    ],
+    credits: ["Product Visualisation", "CG Animation", "Lookdev", "Compositing", "Motion Graphics"],
     hue: 330,
   },
 ];