@devinilabs/reelstack 1.3.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli/scaffold.js +124 -16
- package/package.json +1 -1
- package/reference/dark/codedrop.tsx +908 -0
- package/reference/dark/gpt55.tsx +2608 -0
- package/reference/dark/resourcescta.tsx +609 -0
- package/reference/dark/skills.tsx +1460 -0
- package/reference/dark/stitch2.tsx +162 -0
- package/reference/glass/claudewatchcta.tsx +599 -0
- package/reference/glass/gstack.tsx +3020 -0
- package/reference/glass/jcode.tsx +2267 -0
- package/reference/glass/lilagents.tsx +2649 -0
- package/reference/paper/devini3d.tsx +1799 -0
- package/skill/SKILL.md +25 -16
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* REFERENCE — Stitch2Reel (Family: dark)
|
|
3
|
+
*
|
|
4
|
+
* Canonical example of the dark family's motion vocabulary, frame-locked
|
|
5
|
+
* BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
|
|
6
|
+
* for STUDY and as the source for the scaffold-from-reference flow.
|
|
7
|
+
*
|
|
8
|
+
* Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
|
|
9
|
+
* voiceover, brand SVGs, captures.
|
|
10
|
+
*
|
|
11
|
+
* License: study + adapt patterns OK. Verbatim re-publication as your own
|
|
12
|
+
* template NOT OK. See ReelStack LICENSE.
|
|
13
|
+
*
|
|
14
|
+
* Source: my-video/src/Stitch2Reel.tsx
|
|
15
|
+
* Bundled at: 2026-05-12T19:40:04.828Z
|
|
16
|
+
*/
|
|
17
|
+
import React from "react";
|
|
18
|
+
import {
|
|
19
|
+
AbsoluteFill,
|
|
20
|
+
Sequence,
|
|
21
|
+
OffthreadVideo,
|
|
22
|
+
staticFile,
|
|
23
|
+
useCurrentFrame,
|
|
24
|
+
interpolate,
|
|
25
|
+
Easing,
|
|
26
|
+
} from "remotion";
|
|
27
|
+
import { ds } from "./designSystem";
|
|
28
|
+
|
|
29
|
+
// Composition: 1080x1920 @ 30fps, 600 frames (20s — matches hero.mp4 duration).
|
|
30
|
+
// Instagram safe zones: reserve top 288px and bottom ~422px.
|
|
31
|
+
const SAFE_TOP = 288;
|
|
32
|
+
const SAFE_BOT_OFFSET = 422;
|
|
33
|
+
|
|
34
|
+
// Hero video intrinsic dimensions: 2304x1440 (3:2 landscape).
|
|
35
|
+
// Letterboxed into 1080 wide → scaled height = 1080 * (1440 / 2304) = 675.
|
|
36
|
+
const VIDEO_W = 1080;
|
|
37
|
+
const VIDEO_H = 675;
|
|
38
|
+
|
|
39
|
+
const C = {
|
|
40
|
+
bg: "#0a0a0b",
|
|
41
|
+
fg: "#f5f5f7",
|
|
42
|
+
fgMuted: "#8e8e93",
|
|
43
|
+
stitch: "#ff4d9b",
|
|
44
|
+
stitchDim: "rgba(255,77,155,0.15)",
|
|
45
|
+
} as const;
|
|
46
|
+
|
|
47
|
+
export const Stitch2Reel: React.FC = () => {
|
|
48
|
+
const frame = useCurrentFrame();
|
|
49
|
+
|
|
50
|
+
const titleFade = interpolate(frame, [0, 20], [0, 1], {
|
|
51
|
+
extrapolateRight: "clamp",
|
|
52
|
+
easing: Easing.out(Easing.cubic),
|
|
53
|
+
});
|
|
54
|
+
const titleLift = interpolate(frame, [0, 20], [24, 0], {
|
|
55
|
+
extrapolateRight: "clamp",
|
|
56
|
+
easing: Easing.out(Easing.cubic),
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
const videoFade = interpolate(frame, [10, 30], [0, 1], {
|
|
60
|
+
extrapolateRight: "clamp",
|
|
61
|
+
easing: Easing.out(Easing.cubic),
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: ds.font.sans }}>
|
|
66
|
+
{/* Title — inside the top safe zone */}
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
position: "absolute",
|
|
70
|
+
top: 80,
|
|
71
|
+
left: 0,
|
|
72
|
+
right: 0,
|
|
73
|
+
padding: "0 64px",
|
|
74
|
+
opacity: titleFade,
|
|
75
|
+
transform: `translateY(${titleLift}px)`,
|
|
76
|
+
textAlign: "center",
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<div
|
|
80
|
+
style={{
|
|
81
|
+
display: "inline-block",
|
|
82
|
+
padding: "8px 20px",
|
|
83
|
+
borderRadius: 999,
|
|
84
|
+
background: C.stitchDim,
|
|
85
|
+
color: C.stitch,
|
|
86
|
+
fontSize: 32,
|
|
87
|
+
fontWeight: 600,
|
|
88
|
+
letterSpacing: 1,
|
|
89
|
+
textTransform: "uppercase",
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
Google Labs
|
|
93
|
+
</div>
|
|
94
|
+
<h1
|
|
95
|
+
style={{
|
|
96
|
+
margin: "20px 0 8px",
|
|
97
|
+
fontSize: 96,
|
|
98
|
+
fontWeight: 800,
|
|
99
|
+
color: C.fg,
|
|
100
|
+
lineHeight: 1,
|
|
101
|
+
letterSpacing: -2,
|
|
102
|
+
}}
|
|
103
|
+
>
|
|
104
|
+
Stitch 2.0
|
|
105
|
+
</h1>
|
|
106
|
+
<p
|
|
107
|
+
style={{
|
|
108
|
+
margin: 0,
|
|
109
|
+
fontSize: 34,
|
|
110
|
+
color: C.fgMuted,
|
|
111
|
+
fontWeight: 500,
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
Vibe-design production UI in seconds
|
|
115
|
+
</p>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
{/* Video — wrapped in Sequence per Remotion OffthreadVideo timing rule */}
|
|
119
|
+
<Sequence from={0} durationInFrames={600}>
|
|
120
|
+
<AbsoluteFill
|
|
121
|
+
style={{
|
|
122
|
+
top: SAFE_TOP,
|
|
123
|
+
bottom: SAFE_BOT_OFFSET,
|
|
124
|
+
justifyContent: "center",
|
|
125
|
+
alignItems: "center",
|
|
126
|
+
opacity: videoFade,
|
|
127
|
+
}}
|
|
128
|
+
>
|
|
129
|
+
<div
|
|
130
|
+
style={{
|
|
131
|
+
width: VIDEO_W,
|
|
132
|
+
height: VIDEO_H,
|
|
133
|
+
borderRadius: 24,
|
|
134
|
+
overflow: "hidden",
|
|
135
|
+
boxShadow: "0 40px 100px rgba(255,77,155,0.18), 0 0 0 1px rgba(255,255,255,0.08)",
|
|
136
|
+
}}
|
|
137
|
+
>
|
|
138
|
+
{/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
|
|
139
|
+
</div>
|
|
140
|
+
</AbsoluteFill>
|
|
141
|
+
</Sequence>
|
|
142
|
+
|
|
143
|
+
{/* Footer tag — inside bottom safe-zone clearance */}
|
|
144
|
+
<div
|
|
145
|
+
style={{
|
|
146
|
+
position: "absolute",
|
|
147
|
+
bottom: 120,
|
|
148
|
+
left: 0,
|
|
149
|
+
right: 0,
|
|
150
|
+
textAlign: "center",
|
|
151
|
+
color: C.fgMuted,
|
|
152
|
+
fontSize: 30,
|
|
153
|
+
fontWeight: 500,
|
|
154
|
+
letterSpacing: 0.5,
|
|
155
|
+
opacity: videoFade,
|
|
156
|
+
}}
|
|
157
|
+
>
|
|
158
|
+
stitch.withgoogle.com
|
|
159
|
+
</div>
|
|
160
|
+
</AbsoluteFill>
|
|
161
|
+
);
|
|
162
|
+
};
|