reelme 0.2.2 → 0.3.0

package/template/src/components/scenes/Clip.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { AbsoluteFill, OffthreadVideo, staticFile } from "remotion";
+import { Gif } from "@remotion/gif";
+import { ClipScene } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: ClipScene;
+  theme: Theme;
+}
+
+const isGif = (src: string) => src.endsWith(".gif");
+
+const MediaElement: React.FC<{ scene: ClipScene }> = ({ scene }) => {
+  if (isGif(scene.src)) {
+    return (
+      <Gif
+        src={staticFile(scene.src)}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        fit="cover"
+      />
+    );
+  }
+  return (
+    <OffthreadVideo
+      src={staticFile(scene.src)}
+      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      muted
+      startFrom={scene.startFrom}
+    />
+  );
+};
+
+const BrowserChrome: React.FC<{ children: React.ReactNode; theme: Theme }> = ({ children, theme }) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
+      borderRadius: 12,
+      overflow: "hidden",
+    }}
+  >
+    <div
+      style={{
+        background: theme.surface,
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderBottom: `1px solid ${theme.border}`,
+        flexShrink: 0,
+      }}
+    >
+      {(["#ff5f56", "#ffbd2e", "#27c93f"] as const).map((c) => (
+        <div key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
+      ))}
+    </div>
+    <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>{children}</div>
+  </div>
+);
+
+const MobileChrome: React.FC<{ children: React.ReactNode; theme: Theme }> = ({ children, theme }) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      borderRadius: 40,
+      border: `3px solid ${theme.border}`,
+      overflow: "hidden",
+      boxShadow: "0 40px 100px rgba(0,0,0,0.55)",
+      position: "relative",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Clip: React.FC<Props> = ({ scene, theme }) => {
+  const renderMedia = () => <MediaElement scene={scene} />;
+
+  if (scene.frame === "browser") {
+    return (
+      <AbsoluteFill
+        style={{
+          background: "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "60px 120px",
+        }}
+      >
+        <BrowserChrome theme={theme}>{renderMedia()}</BrowserChrome>
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+      </AbsoluteFill>
+    );
+  }
+
+  if (scene.frame === "mobile") {
+    return (
+      <AbsoluteFill
+        style={{
+          background: "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "40px 200px",
+        }}
+      >
+        <MobileChrome theme={theme}>{renderMedia()}</MobileChrome>
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+      </AbsoluteFill>
+    );
+  }
+
+  return (
+    <AbsoluteFill style={{ background: "transparent", borderRadius: 12, overflow: "hidden" }}>
+      {renderMedia()}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/scenes/CodeReveal.tsx

@@ -8,9 +8,10 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: CodeRevealBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const CodeReveal: React.FC<Props> = ({ scene, theme }) => {
+export const CodeReveal: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const lines = scene.code.split("\n");
   // Caption appears after all lines are revealed: startFrame=14, framesPerLine=9, plus 20-frame buffer
   const captionStart = 14 + lines.length * 9 + 20;
@@ -18,7 +19,7 @@ export const CodeReveal: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -35,7 +36,7 @@ export const CodeReveal: React.FC<Props> = ({ scene, theme }) => {
           framesPerLine={9}
         />
       </div>
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/components/scenes/DataFlow.tsx

@@ -8,12 +8,13 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: DataFlowBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const NODE_W = 200;
 const NODE_H = 64;
 
-export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
+export const DataFlow: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
 
@@ -38,7 +39,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
   const captionStart = (nodeCount - 1) * STEP + NODE_SETTLE + 20;
 
   return (
-    <AbsoluteFill style={{ background: theme.bg }}>
+    <AbsoluteFill style={{ background: "transparent" }}>
       {/* SVG layer for arrows */}
       <svg width={width} height={height} style={{ position: "absolute", inset: 0 }}>
         {scene.edges.map((edge, i) => {
@@ -96,7 +97,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
         );
       })}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/components/scenes/FeatureList.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { FeatureListScene as FeatureListBrief } from "../../brief";
 import { Theme } from "../../theme";
+import { PlatformPreset, typeScale } from "../../platforms";
 import { Label } from "../primitives/Label";
 import { Caption } from "../primitives/Caption";
 import { Icon } from "../primitives/Icon";
@@ -9,35 +10,39 @@ import { Icon } from "../primitives/Icon";
 interface Props {
   scene: FeatureListBrief;
   theme: Theme;
+  platform?: PlatformPreset;
+  bottomInset?: number;
 }
 
 const HEADLINE_FRAMES = 20;
 const FRAMES_PER_ITEM = 25;
 
-export const FeatureList: React.FC<Props> = ({ scene, theme }) => {
+export const FeatureList: React.FC<Props> = ({ scene, theme, platform, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const scale = platform ? typeScale(platform) : 1.0;
 
   const captionStart = HEADLINE_FRAMES + scene.items.length * FRAMES_PER_ITEM + 20;
+  const left = scene.align === "left";
 
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        alignItems: left ? "flex-start" : "center",
         justifyContent: "center",
-        padding: "0 200px",
+        padding: left ? "0 0 0 140px" : "0 200px",
       }}
     >
       {scene.headline && (
         <div style={{ marginBottom: 48 }}>
-          <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
+          <Label text={scene.headline} theme={theme} size="lg" align={left ? "left" : "center"} startFrame={0} />
         </div>
       )}
 
-      <div style={{ display: "flex", flexDirection: "column", gap: 28, width: "100%" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 28, width: left ? "auto" : "100%", maxWidth: left ? 1200 : undefined }}>
         {scene.items.map((item, i) => {
           const text = typeof item === "string" ? item : item.text;
           const icon = typeof item === "string" ? undefined : item.icon;
@@ -90,7 +95,7 @@ export const FeatureList: React.FC<Props> = ({ scene, theme }) => {
               <span
                 style={{
                   fontFamily: theme.fontSans,
-                  fontSize: 28,
+                  fontSize: 28 * scale,
                   fontWeight: 500,
                   color: theme.text,
                   lineHeight: 1.4,
@@ -104,7 +109,7 @@ export const FeatureList: React.FC<Props> = ({ scene, theme }) => {
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/components/scenes/FileTree.tsx

@@ -8,6 +8,7 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: FileTreeBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const HEADLINE_FRAMES = 20;
@@ -43,7 +44,7 @@ const FileIcon: React.FC<{ color: string }> = ({ color }) => (
   </svg>
 );
 
-export const FileTree: React.FC<Props> = ({ scene, theme }) => {
+export const FileTree: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -52,7 +53,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -119,7 +120,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme }) => {
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/components/scenes/Hook.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { HookScene as HookBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { PlatformPreset, typeScale } from "../../platforms";
+import { RevealText } from "../primitives/RevealText";
+import { Kicker } from "../primitives/Kicker";
+
+interface Props {
+  scene: HookBrief;
+  theme: Theme;
+  platform: PlatformPreset;
+}
+
+export const Hook: React.FC<Props> = ({ scene, theme, platform }) => {
+  const frame = useCurrentFrame();
+  const { fps, width } = useVideoConfig();
+  const left = scene.align === "left";
+
+  const fontSize = width * 0.1 * typeScale(platform);
+  // The whole block eases out of a slight over-scale so the words don't just
+  // appear — they land. A touch of continuous drift keeps the hold alive.
+  const settle = spring({ frame, fps, config: { damping: 26, stiffness: 90, mass: 1 } });
+  const scale = interpolate(settle, [0, 1], [1.06, 1]);
+  const drift = Math.sin(frame / 40) * 0.4;
+
+  return (
+    <AbsoluteFill
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: left ? "flex-start" : "center",
+        justifyContent: "center",
+        padding: left ? "0 0 0 140px" : "0 80px",
+      }}
+    >
+      <div style={{ transform: `scale(${scale}) translateY(${drift}px)`, transformOrigin: left ? "left center" : "center", willChange: "transform" }}>
+        {scene.kicker && <Kicker text={scene.kicker} theme={theme} startFrame={0} align={left ? "left" : "center"} />}
+        <RevealText
+          text={scene.text}
+          theme={theme}
+          fontSize={fontSize}
+          fontWeight={800}
+          emphasis={scene.accent}
+          align={left ? "left" : "center"}
+          startFrame={scene.kicker ? 6 : 0}
+          stagger={3.5}
+          letterSpacing="-0.04em"
+          lineHeight={1.04}
+          maxWidth={width * (left ? 0.72 : 0.84)}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};

package/template/src/components/scenes/HotkeyScene.tsx

@@ -8,12 +8,13 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: HotkeyBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const FRAMES_PER_KEY = 20;
 const ACTION_DELAY = 15;
 
-export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
+export const Hotkey: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -27,7 +28,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -71,7 +72,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
         </div>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/components/scenes/MobileScreen.tsx

@@ -7,26 +7,27 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: MobileBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-const PHONE_W = 340;
-const PHONE_H = 720;
-const NOTCH_H = 30;
-const RADIUS = 40;
+const PHONE_W = 384;
+const PHONE_H = 808;
+const NOTCH_H = 32;
+const RADIUS = 46;
 
-export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
+export const MobileScreen: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
   const progress = spring({ frame, fps, config: theme.motion });
   const opacity = interpolate(progress, [0, 1], [0, 1]);
   const translateY = interpolate(progress, [0, 1], [60, 0]);
-  const scale = interpolate(progress, [0, 1], [0.88, 1]);
+  const scale = interpolate(progress, [0, 1], [0.9, 1]);
 
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -39,7 +40,7 @@ export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
           borderRadius: RADIUS,
           border: `3px solid ${theme.border}`,
           background: theme.surface,
-          boxShadow: `0 40px 100px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05)`,
+          boxShadow: `0 50px 120px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05)`,
           position: "relative",
           overflow: "hidden",
           opacity,
@@ -53,11 +54,11 @@ export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
             top: 0,
             left: "50%",
             transform: "translateX(-50%)",
-            width: 110,
+            width: 120,
             height: NOTCH_H,
             background: theme.surface,
-            borderBottomLeftRadius: 16,
-            borderBottomRightRadius: 16,
+            borderBottomLeftRadius: 18,
+            borderBottomRightRadius: 18,
             zIndex: 10,
           }}
         />
@@ -79,123 +80,78 @@ export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
               display: "flex",
               alignItems: "flex-end",
               justifyContent: "space-between",
-              paddingLeft: 20,
-              paddingRight: 20,
+              paddingLeft: 22,
+              paddingRight: 22,
               paddingBottom: 4,
               fontFamily: theme.fontSans,
-              fontSize: 11,
+              fontSize: 12,
               fontWeight: 600,
-              color: theme.textMuted,
+              color: theme.text,
+              flexShrink: 0,
             }}
           >
             <span>9:41</span>
-            <span>●●●</span>
+            <span style={{ letterSpacing: 1 }}>●●●</span>
           </div>
 
           {/* App header */}
           {scene.title && (
             <div
               style={{
-                height: 48,
+                height: 52,
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
+                gap: 10,
+                padding: "0 18px",
                 borderBottom: `1px solid ${theme.border}`,
                 fontFamily: theme.fontSans,
-                fontSize: 16,
-                fontWeight: 600,
+                fontSize: 17,
+                fontWeight: 700,
                 color: theme.text,
                 flexShrink: 0,
               }}
             >
+              <div style={{ width: 12, height: 12, borderRadius: "50%", background: theme.accent }} />
               {scene.title}
             </div>
           )}
 
           {/* Content */}
           <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
-            {scene.image ? (
-              <Img
-                src={staticFile(scene.image)}
-                style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              />
+            {scene.screenshot ? (
+              <KenBurns frame={frame}>
+                <Img
+                  src={staticFile(scene.screenshot)}
+                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+                />
+              </KenBurns>
             ) : (
-              <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
-                {/* Search bar */}
-                <div
-                  style={{
-                    height: 34,
-                    background: theme.surface,
-                    borderRadius: 8,
-                    border: `1px solid ${theme.border}`,
-                    display: "flex",
-                    alignItems: "center",
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    fontFamily: theme.fontSans,
-                    fontSize: 12,
-                    color: theme.textMuted,
-                  }}
-                >
-                  Search...
-                </div>
-                {/* List items */}
-                {[72, 56, 60, 54, 58].map((_, i) => (
-                  <div
-                    key={i}
-                    style={{
-                      height: 58,
-                      background: theme.surface,
-                      borderRadius: 10,
-                      border: `1px solid ${theme.border}`,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 10,
-                      paddingLeft: 10,
-                      paddingRight: 10,
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: "50%",
-                        background: theme.accentMuted,
-                        border: `1.5px solid ${theme.accent}`,
-                        flexShrink: 0,
-                      }}
-                    />
-                    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
-                      <div style={{ height: 11, background: theme.border, borderRadius: 4, width: `${58 + i * 8}%` }} />
-                      <div style={{ height: 9, background: theme.border, borderRadius: 4, width: `${38 + i * 6}%`, opacity: 0.6 }} />
-                    </div>
-                  </div>
-                ))}
-              </div>
+              <MockFeed theme={theme} frame={frame} fps={fps} />
             )}
           </div>
 
           {/* Bottom nav */}
           <div
             style={{
-              height: 52,
+              height: 56,
               borderTop: `1px solid ${theme.border}`,
               display: "flex",
               alignItems: "center",
               justifyContent: "space-around",
               flexShrink: 0,
+              background: theme.surface,
             }}
           >
             {["⌂", "⊞", "♡", "◉"].map((icon, i) => (
               <div
                 key={i}
                 style={{
-                  width: 36,
-                  height: 36,
+                  width: 38,
+                  height: 38,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  fontSize: 18,
+                  fontSize: 19,
                   color: i === 0 ? theme.accent : theme.textMuted,
                 }}
               >
@@ -206,7 +162,89 @@ export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
         </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
+    </AbsoluteFill>
+  );
+};
+
+/** Slow ken-burns push so a real screenshot reads as alive footage, not a still. */
+const KenBurns: React.FC<{ frame: number; children: React.ReactNode }> = ({ frame, children }) => {
+  const s = interpolate(frame, [0, 240], [1.0, 1.1], { extrapolateRight: "clamp" });
+  const y = interpolate(frame, [0, 240], [0, -3], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill style={{ transform: `scale(${s}) translateY(${y}%)`, transformOrigin: "center top" }}>
+      {children}
     </AbsoluteFill>
   );
 };
+
+/** An app-like feed that builds in and gently scrolls, when no screenshot is given. */
+const MockFeed: React.FC<{ theme: Theme; frame: number; fps: number }> = ({ theme, frame, fps }) => {
+  const scrollY = interpolate(frame, [24, 200], [0, -46], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+
+  const Item: React.FC<{ index: number; children: React.ReactNode }> = ({ index, children }) => {
+    const p = spring({ frame: frame - 8 - index * 7, fps, config: theme.motion });
+    return (
+      <div style={{ opacity: interpolate(p, [0, 1], [0, 1]), transform: `translateY(${interpolate(p, [0, 1], [16, 0])}px)` }}>
+        {children}
+      </div>
+    );
+  };
+
+  const cardBase: React.CSSProperties = {
+    background: theme.surface,
+    borderRadius: 14,
+    border: `1px solid ${theme.border}`,
+  };
+
+  return (
+    <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, transform: `translateY(${scrollY}px)` }}>
+      <Item index={0}>
+        <div style={{ ...cardBase, height: 36, display: "flex", alignItems: "center", padding: "0 14px", fontFamily: theme.fontSans, fontSize: 13, color: theme.textMuted }}>
+          Search
+        </div>
+      </Item>
+
+      {/* Featured hero card */}
+      <Item index={1}>
+        <div
+          style={{
+            height: 132,
+            borderRadius: 16,
+            background: `linear-gradient(135deg, ${theme.accent} 0%, ${theme.accentMuted} 100%)`,
+            padding: 16,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            gap: 8,
+          }}
+        >
+          <div style={{ height: 13, width: "62%", background: "rgba(255,255,255,0.92)", borderRadius: 5 }} />
+          <div style={{ height: 10, width: "40%", background: "rgba(255,255,255,0.6)", borderRadius: 5 }} />
+        </div>
+      </Item>
+
+      {[0, 1, 2, 3].map((i) => (
+        <Item key={i} index={2 + i}>
+          <div style={{ ...cardBase, height: 70, display: "flex", alignItems: "center", gap: 12, padding: "0 12px" }}>
+            <div
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                background: theme.accentMuted,
+                border: `1.5px solid ${theme.accent}`,
+                flexShrink: 0,
+              }}
+            />
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
+              <div style={{ height: 11, background: theme.text, opacity: 0.85, borderRadius: 4, width: `${70 - i * 8}%` }} />
+              <div style={{ height: 9, background: theme.textMuted, opacity: 0.5, borderRadius: 4, width: `${48 - i * 5}%` }} />
+            </div>
+            <div style={{ width: 30, height: 18, borderRadius: 6, background: theme.accentMuted, flexShrink: 0 }} />
+          </div>
+        </Item>
+      ))}
+    </div>
+  );
+};