@editframe/create 0.26.0-beta.0 → 0.26.1-beta.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/dist/templates/animejs/index.html +232 -0
- package/dist/templates/animejs/package-lock.json +5330 -0
- package/dist/templates/animejs/package.json +23 -0
- package/dist/templates/animejs/postcss.config.cjs +5 -0
- package/dist/templates/animejs/src/assets/.gitkeep +0 -0
- package/dist/templates/animejs/src/assets/bars-n-tone.mp4 +0 -0
- package/dist/templates/animejs/src/assets/editframe.png +0 -0
- package/dist/templates/animejs/src/index.ts +148 -0
- package/dist/templates/animejs/src/styles.css +30 -0
- package/dist/templates/animejs/tailwind.config.js +8 -0
- package/dist/templates/animejs/vite.config.ts +17 -0
- package/dist/templates/card-poetry/package.json +3 -3
- package/dist/templates/react-demo/package.json +3 -3
- package/dist/templates/simple-demo/package.json +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<script type="module" src="./src/index.ts"></script>
|
|
7
|
+
<link rel="stylesheet" href="./src/styles.css" />
|
|
8
|
+
<style>
|
|
9
|
+
ef-timegroup[mode="fixed"] {
|
|
10
|
+
position: absolute;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-section {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
gap: 1rem;
|
|
19
|
+
padding: 2rem;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.feature-label {
|
|
25
|
+
font-size: 0.875rem;
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
text-transform: uppercase;
|
|
28
|
+
letter-spacing: 0.05em;
|
|
29
|
+
color: #ffffff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.code-snippet {
|
|
33
|
+
margin: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.code-snippet pre {
|
|
37
|
+
margin: 0 !important;
|
|
38
|
+
border-radius: 0.375rem;
|
|
39
|
+
font-size: 0.5rem !important;
|
|
40
|
+
line-height: 1.2 !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.code-snippet pre code {
|
|
44
|
+
font-family: 'Fira Code', 'Courier New', monospace !important;
|
|
45
|
+
font-size: 0.5rem !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.demo-content {
|
|
49
|
+
flex: 1;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
}
|
|
54
|
+
</style>
|
|
55
|
+
</head>
|
|
56
|
+
|
|
57
|
+
<body>
|
|
58
|
+
<ef-timegroup mode="sequence" fps="30" overlap="0.5s"
|
|
59
|
+
class="w-[500px] h-[500px] bg-slate-500 relative overflow-hidden">
|
|
60
|
+
<ef-timegroup id="text-intro" mode="fixed" duration="3s" class="text-white bg-indigo-600">
|
|
61
|
+
<div class="demo-section">
|
|
62
|
+
<div class="feature-label">splitText + stagger animation</div>
|
|
63
|
+
<div class="demo-content">
|
|
64
|
+
<h2 class="text-4xl font-bold">Editframe ❤️ AnimeJS</h2>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="code-snippet">
|
|
67
|
+
<pre><code class="language-javascript">const { chars } = splitText("h2", { chars: true });
|
|
68
|
+
|
|
69
|
+
const textAnimation = animate(chars, {
|
|
70
|
+
y: [{ to: "-2.75rem" }, { to: 0 }],
|
|
71
|
+
rotate: { from: "-1turn" },
|
|
72
|
+
delay: stagger(50),
|
|
73
|
+
autoplay: false
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
timegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
77
|
+
textAnimation.currentTime = ownCurrentTimeMs;
|
|
78
|
+
});</code></pre>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</ef-timegroup>
|
|
82
|
+
<ef-timegroup id="pyramid" mode="fixed" duration="3s" class="text-white bg-purple-600">
|
|
83
|
+
<style>
|
|
84
|
+
.pyramid {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
gap: 1rem;
|
|
88
|
+
align-items: center;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.triangle {
|
|
92
|
+
width: 0;
|
|
93
|
+
height: 0;
|
|
94
|
+
border-left: 2rem solid transparent;
|
|
95
|
+
border-right: 2rem solid transparent;
|
|
96
|
+
border-bottom: 3.5rem solid #93c5fd;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.square {
|
|
100
|
+
width: 4rem;
|
|
101
|
+
height: 4rem;
|
|
102
|
+
background: #93c5fd;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.circle {
|
|
106
|
+
width: 4rem;
|
|
107
|
+
height: 4rem;
|
|
108
|
+
background: #93c5fd;
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
}
|
|
111
|
+
</style>
|
|
112
|
+
<div class="demo-section">
|
|
113
|
+
<div class="feature-label">Timeline with labels & relative positioning</div>
|
|
114
|
+
<div class="demo-content">
|
|
115
|
+
<div class="pyramid">
|
|
116
|
+
<div class="triangle"></div>
|
|
117
|
+
<div class="square"></div>
|
|
118
|
+
<div class="circle"></div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="code-snippet">
|
|
122
|
+
<pre><code class="language-javascript">const timeline = createTimeline({
|
|
123
|
+
defaults: { duration: 750 },
|
|
124
|
+
autoplay: false
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
timeline
|
|
128
|
+
.label("start")
|
|
129
|
+
.add(".square", { x: "15rem" }, 500)
|
|
130
|
+
.add(".circle", { x: "15rem" }, "start")
|
|
131
|
+
.add(".triangle", { x: "15rem", rotate: "1turn" }, "<-=500");
|
|
132
|
+
|
|
133
|
+
timegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
134
|
+
timeline.currentTime = ownCurrentTimeMs;
|
|
135
|
+
});</code></pre>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</ef-timegroup>
|
|
139
|
+
<ef-timegroup id="waapi-demo" mode="fixed" duration="3s" class="text-white bg-teal-600">
|
|
140
|
+
<div class="demo-section">
|
|
141
|
+
<div class="feature-label">Web Animations API (WAAPI)</div>
|
|
142
|
+
<div class="demo-content">
|
|
143
|
+
<h2 class="text-4xl font-bold">HELLO WAAPI</h2>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="code-snippet">
|
|
146
|
+
<pre><code class="language-javascript">const { chars } = splitText("h2", { chars: true });
|
|
147
|
+
|
|
148
|
+
const waapiAnimation = waapi.animate(chars, {
|
|
149
|
+
translate: "0 -2rem",
|
|
150
|
+
delay: stagger(100),
|
|
151
|
+
duration: 600,
|
|
152
|
+
alternate: true,
|
|
153
|
+
autoplay: false
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
timegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
157
|
+
waapiAnimation.currentTime = ownCurrentTimeMs;
|
|
158
|
+
});</code></pre>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</ef-timegroup>
|
|
162
|
+
<ef-timegroup id="racetrack" mode="fixed" duration="6s" class="text-white bg-green-600">
|
|
163
|
+
<style>
|
|
164
|
+
.track-container {
|
|
165
|
+
position: relative;
|
|
166
|
+
width: 304px;
|
|
167
|
+
height: 112px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.motion-path-overlay {
|
|
171
|
+
position: absolute;
|
|
172
|
+
top: 0;
|
|
173
|
+
left: 0;
|
|
174
|
+
width: 304px;
|
|
175
|
+
height: 112px;
|
|
176
|
+
pointer-events: none;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.motion-path-overlay .car {
|
|
180
|
+
position: absolute;
|
|
181
|
+
width: 16px;
|
|
182
|
+
height: 8px;
|
|
183
|
+
margin-left: -8px;
|
|
184
|
+
margin-top: -4px;
|
|
185
|
+
transform-origin: 50% 50%;
|
|
186
|
+
border-radius: 2px;
|
|
187
|
+
}
|
|
188
|
+
</style>
|
|
189
|
+
<div class="demo-section">
|
|
190
|
+
<div class="feature-label">SVG Motion Path + Line Drawing</div>
|
|
191
|
+
<div class="demo-content">
|
|
192
|
+
<div class="track-container">
|
|
193
|
+
<svg id="motion-path" viewBox="0 0 304 112" width="304" height="112">
|
|
194
|
+
<title>Suzuka</title>
|
|
195
|
+
<g stroke="none" fill="none" fill-rule="evenodd">
|
|
196
|
+
<!-- Background track (visible) -->
|
|
197
|
+
<path
|
|
198
|
+
d="M189.142857,4 C227.456875,4 248.420457,4.00974888 256.864191,4.00974888 C263.817211,4.00974888 271.61219,3.69583517 274.986231,6.63061513 C276.382736,7.84531176 279.193529,11.3814152 280.479499,13.4815847 C281.719344,15.5064248 284.841964,20.3571626 275.608629,20.3571626 C265.817756,20.3571626 247.262478,19.9013915 243.955117,19.9013915 C239.27946,19.9013915 235.350655,24.7304885 228.6344,24.7304885 C224.377263,24.7304885 219.472178,21.0304113 214.535324,21.0304113 C207.18393,21.0304113 200.882842,30.4798911 194.124187,30.4798911 C186.992968,30.4798911 182.652552,23.6245972 173.457298,23.6245972 C164.83277,23.6245972 157.191045,31.5424105 157.191045,39.1815359 C157.191045,48.466779 167.088672,63.6623005 166.666679,66.9065088 C166.378668,69.1206889 155.842137,79.2568633 151.508744,77.8570506 C145.044576,75.7689355 109.126667,61.6405346 98.7556561,52.9785141 C96.4766876,51.0750861 89.3680347,39.5769094 83.4195005,38.5221785 C80.6048001,38.0231057 73.0179337,38.7426555 74.4158694,42.6956376 C76.7088819,49.1796531 86.3280337,64.1214904 87.1781062,66.9065088 C88.191957,70.2280995 86.4690152,77.0567847 82.2060607,79.2503488 C79.2489435,80.7719756 73.1324132,82.8858479 64.7015706,83.0708761 C55.1604808,83.2802705 44.4254811,80.401884 39.1722168,80.401884 C25.7762119,80.401884 24.3280517,89.1260466 22.476679,94.4501705 C21.637667,96.8629767 20.4337535,108 33.2301959,108 C37.8976087,108 45.0757044,107.252595 53.4789069,103.876424 C61.8821095,100.500252 122.090049,78.119656 128.36127,75.3523302 C141.413669,69.5926477 151.190142,68.4987755 147.018529,52.0784879 C143.007818,36.291544 143.396957,23.4057975 145.221196,19.6589263 C146.450194,17.1346449 148.420955,14.8552817 153.206723,15.7880203 C155.175319,16.1716965 155.097637,15.0525421 156.757598,11.3860986 C158.417558,7.71965506 161.842736,4.00974888 167.736963,4.00974888 C177.205308,4.00974888 184.938832,4 189.142857,4 Z"
|
|
199
|
+
stroke="currentColor" stroke-width="2" opacity="0.35"></path>
|
|
200
|
+
<!-- Animated track -->
|
|
201
|
+
<path
|
|
202
|
+
d="M189.142857,4 C227.456875,4 248.420457,4.00974888 256.864191,4.00974888 C263.817211,4.00974888 271.61219,3.69583517 274.986231,6.63061513 C276.382736,7.84531176 279.193529,11.3814152 280.479499,13.4815847 C281.719344,15.5064248 284.841964,20.3571626 275.608629,20.3571626 C265.817756,20.3571626 247.262478,19.9013915 243.955117,19.9013915 C239.27946,19.9013915 235.350655,24.7304885 228.6344,24.7304885 C224.377263,24.7304885 219.472178,21.0304113 214.535324,21.0304113 C207.18393,21.0304113 200.882842,30.4798911 194.124187,30.4798911 C186.992968,30.4798911 182.652552,23.6245972 173.457298,23.6245972 C164.83277,23.6245972 157.191045,31.5424105 157.191045,39.1815359 C157.191045,48.466779 167.088672,63.6623005 166.666679,66.9065088 C166.378668,69.1206889 155.842137,79.2568633 151.508744,77.8570506 C145.044576,75.7689355 109.126667,61.6405346 98.7556561,52.9785141 C96.4766876,51.0750861 89.3680347,39.5769094 83.4195005,38.5221785 C80.6048001,38.0231057 73.0179337,38.7426555 74.4158694,42.6956376 C76.7088819,49.1796531 86.3280337,64.1214904 87.1781062,66.9065088 C88.191957,70.2280995 86.4690152,77.0567847 82.2060607,79.2503488 C79.2489435,80.7719756 73.1324132,82.8858479 64.7015706,83.0708761 C55.1604808,83.2802705 44.4254811,80.401884 39.1722168,80.401884 C25.7762119,80.401884 24.3280517,89.1260466 22.476679,94.4501705 C21.637667,96.8629767 20.4337535,108 33.2301959,108 C37.8976087,108 45.0757044,107.252595 53.4789069,103.876424 C61.8821095,100.500252 122.090049,78.119656 128.36127,75.3523302 C141.413669,69.5926477 151.190142,68.4987755 147.018529,52.0784879 C143.007818,36.291544 143.396957,23.4057975 145.221196,19.6589263 C146.450194,17.1346449 148.420955,14.8552817 153.206723,15.7880203 C155.175319,16.1716965 155.097637,15.0525421 156.757598,11.3860986 C158.417558,7.71965506 161.842736,4.00974888 167.736963,4.00974888 C177.205308,4.00974888 184.938832,4 189.142857,4 Z"
|
|
203
|
+
id="suzuka" stroke="currentColor" stroke-width="2"></path>
|
|
204
|
+
</g>
|
|
205
|
+
</svg>
|
|
206
|
+
<div class="motion-path-overlay">
|
|
207
|
+
<div class="w-4 h-2 bg-blue-100 car"></div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="code-snippet">
|
|
212
|
+
<pre><code class="language-javascript">const carAnimation = animate(".car", {
|
|
213
|
+
...svg.createMotionPath("#suzuka"),
|
|
214
|
+
autoplay: false
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
const lineAnimation = animate(svg.createDrawable("#suzuka"), {
|
|
218
|
+
draw: "0 1",
|
|
219
|
+
autoplay: false
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
timegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
223
|
+
carAnimation.currentTime = ownCurrentTimeMs;
|
|
224
|
+
lineAnimation.currentTime = ownCurrentTimeMs;
|
|
225
|
+
});</code></pre>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</ef-timegroup>
|
|
229
|
+
</ef-timegroup>
|
|
230
|
+
</body>
|
|
231
|
+
|
|
232
|
+
</html>
|