@editframe/create 0.6.0-beta.19 → 0.6.0-beta.21

package/dist/templates/card-poetry/src/assets/cards/card-queen-spades.json

@@ -0,0 +1,338 @@
+{
+  "text": " The Queen of Spades, a mysterious and formidable presence in the deck. Cloaked in the enigma of the Spade, she is the embodiment of intellect and intuition. The Queen of Spades, a strategist in her own right, weaves a tapestry of complexity and depth, challenging all who cross her path.",
+  "segments": [
+    {
+      "start": 0.12,
+      "end": 3.74,
+      "text": " The Queen of Spades, a mysterious and formidable presence in the deck.",
+      "confidence": 0.94,
+      "words": [
+        {
+          "text": "The",
+          "start": 0.12,
+          "end": 0.24,
+          "confidence": 0.8
+        },
+        {
+          "text": "Queen",
+          "start": 0.24,
+          "end": 0.4,
+          "confidence": 0.86
+        },
+        {
+          "text": "of",
+          "start": 0.4,
+          "end": 0.56,
+          "confidence": 0.98
+        },
+        {
+          "text": "Spades,",
+          "start": 0.56,
+          "end": 1.02,
+          "confidence": 0.99
+        },
+        {
+          "text": "a",
+          "start": 1.2,
+          "end": 1.28,
+          "confidence": 0.87
+        },
+        {
+          "text": "mysterious",
+          "start": 1.28,
+          "end": 1.72,
+          "confidence": 0.98
+        },
+        {
+          "text": "and",
+          "start": 1.72,
+          "end": 2.16,
+          "confidence": 0.99
+        },
+        {
+          "text": "formidable",
+          "start": 2.16,
+          "end": 2.58,
+          "confidence": 0.99
+        },
+        {
+          "text": "presence",
+          "start": 2.58,
+          "end": 3.06,
+          "confidence": 0.99
+        },
+        {
+          "text": "in",
+          "start": 3.06,
+          "end": 3.36,
+          "confidence": 0.98
+        },
+        {
+          "text": "the",
+          "start": 3.36,
+          "end": 3.5,
+          "confidence": 0.99
+        },
+        {
+          "text": "deck.",
+          "start": 3.5,
+          "end": 3.74,
+          "confidence": 0.87
+        }
+      ]
+    },
+    {
+      "start": 4.88,
+      "end": 8.94,
+      "text": " Cloaked in the enigma of the Spade, she is the embodiment of intellect and intuition.",
+      "confidence": 0.94,
+      "words": [
+        {
+          "text": "Cloaked",
+          "start": 4.88,
+          "end": 5.16,
+          "confidence": 0.85
+        },
+        {
+          "text": "in",
+          "start": 5.16,
+          "end": 5.28,
+          "confidence": 1.0
+        },
+        {
+          "text": "the",
+          "start": 5.28,
+          "end": 5.38,
+          "confidence": 1.0
+        },
+        {
+          "text": "enigma",
+          "start": 5.38,
+          "end": 5.72,
+          "confidence": 0.93
+        },
+        {
+          "text": "of",
+          "start": 5.72,
+          "end": 5.92,
+          "confidence": 1.0
+        },
+        {
+          "text": "the",
+          "start": 5.92,
+          "end": 6.02,
+          "confidence": 0.95
+        },
+        {
+          "text": "Spade,",
+          "start": 6.02,
+          "end": 6.46,
+          "confidence": 0.76
+        },
+        {
+          "text": "she",
+          "start": 6.64,
+          "end": 6.76,
+          "confidence": 0.96
+        },
+        {
+          "text": "is",
+          "start": 6.76,
+          "end": 6.88,
+          "confidence": 1.0
+        },
+        {
+          "text": "the",
+          "start": 6.88,
+          "end": 7.02,
+          "confidence": 1.0
+        },
+        {
+          "text": "embodiment",
+          "start": 7.02,
+          "end": 7.52,
+          "confidence": 1.0
+        },
+        {
+          "text": "of",
+          "start": 7.52,
+          "end": 7.7,
+          "confidence": 0.99
+        },
+        {
+          "text": "intellect",
+          "start": 7.7,
+          "end": 8.14,
+          "confidence": 0.99
+        },
+        {
+          "text": "and",
+          "start": 8.14,
+          "end": 8.46,
+          "confidence": 0.98
+        },
+        {
+          "text": "intuition.",
+          "start": 8.46,
+          "end": 8.94,
+          "confidence": 0.99
+        }
+      ]
+    },
+    {
+      "start": 10.14,
+      "end": 15.28,
+      "text": " The Queen of Spades, a strategist in her own right, weaves a tapestry of complexity and depth,",
+      "confidence": 0.94,
+      "words": [
+        {
+          "text": "The",
+          "start": 10.14,
+          "end": 10.24,
+          "confidence": 1.0
+        },
+        {
+          "text": "Queen",
+          "start": 10.24,
+          "end": 10.44,
+          "confidence": 0.99
+        },
+        {
+          "text": "of",
+          "start": 10.44,
+          "end": 10.58,
+          "confidence": 1.0
+        },
+        {
+          "text": "Spades,",
+          "start": 10.58,
+          "end": 11.06,
+          "confidence": 1.0
+        },
+        {
+          "text": "a",
+          "start": 11.22,
+          "end": 11.3,
+          "confidence": 0.99
+        },
+        {
+          "text": "strategist",
+          "start": 11.3,
+          "end": 11.94,
+          "confidence": 1.0
+        },
+        {
+          "text": "in",
+          "start": 11.94,
+          "end": 12.12,
+          "confidence": 0.99
+        },
+        {
+          "text": "her",
+          "start": 12.12,
+          "end": 12.28,
+          "confidence": 1.0
+        },
+        {
+          "text": "own",
+          "start": 12.28,
+          "end": 12.46,
+          "confidence": 1.0
+        },
+        {
+          "text": "right,",
+          "start": 12.46,
+          "end": 12.78,
+          "confidence": 0.99
+        },
+        {
+          "text": "weaves",
+          "start": 13.1,
+          "end": 13.36,
+          "confidence": 0.67
+        },
+        {
+          "text": "a",
+          "start": 13.36,
+          "end": 13.48,
+          "confidence": 0.99
+        },
+        {
+          "text": "tapestry",
+          "start": 13.48,
+          "end": 13.94,
+          "confidence": 0.99
+        },
+        {
+          "text": "of",
+          "start": 13.94,
+          "end": 14.12,
+          "confidence": 0.98
+        },
+        {
+          "text": "complexity",
+          "start": 14.12,
+          "end": 14.64,
+          "confidence": 0.99
+        },
+        {
+          "text": "and",
+          "start": 14.64,
+          "end": 15.08,
+          "confidence": 0.8
+        },
+        {
+          "text": "depth,",
+          "start": 15.08,
+          "end": 15.28,
+          "confidence": 0.86
+        }
+      ]
+    },
+    {
+      "start": 15.28,
+      "end": 17.38,
+      "text": " challenging all who cross her path.",
+      "confidence": 1.0,
+      "words": [
+        {
+          "text": "challenging",
+          "start": 15.28,
+          "end": 16.1,
+          "confidence": 0.98
+        },
+        {
+          "text": "all",
+          "start": 16.1,
+          "end": 16.46,
+          "confidence": 1.0
+        },
+        {
+          "text": "who",
+          "start": 16.46,
+          "end": 16.64,
+          "confidence": 1.0
+        },
+        {
+          "text": "cross",
+          "start": 16.64,
+          "end": 16.88,
+          "confidence": 1.0
+        },
+        {
+          "text": "her",
+          "start": 16.88,
+          "end": 17.08,
+          "confidence": 1.0
+        },
+        {
+          "text": "path.",
+          "start": 17.08,
+          "end": 17.38,
+          "confidence": 1.0
+        }
+      ]
+    }
+  ],
+  "language": "en"
+}

package/dist/templates/card-poetry/src/index.js

@@ -0,0 +1,2 @@
+import "@editframe/elements";
+import "@editframe/elements/styles.css";

package/dist/templates/card-poetry/src/keyframes.css

@@ -0,0 +1,163 @@
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes disco {
+  from {
+    filter: hue-rotate(0deg);
+  }
+  to {
+    filter: hue-rotate(360deg);
+  }
+}
+@keyframes slide-in-left {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 0%;
+  }
+}
+@keyframes slide-in-right {
+  from {
+    transform: translateX(150%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes slide-out-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(150%);
+  }
+}
+@keyframes flip {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0.8);
+  }
+  80% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-150%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes jiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes barrel {
+  0% {
+    transform: translate3d(0px, 0px, 0px) rotate3d(1, 0, 0, 0deg);
+  }
+  10% {
+    transform: translate3d(30px, 10px, -30px) rotate3d(1, 0, 0, 36deg);
+  }
+  20% {
+    transform: translate3d(60px, 20px, -60px) rotate3d(1, 0, 0, 72deg);
+  }
+  30% {
+    transform: translate3d(90px, 40px, -90px) rotate3d(1, 1, 0, 108deg);
+  }
+  40% {
+    transform: translate3d(120px, 60px, -120px) rotate3d(1, 1, 0, 144deg);
+  }
+  50% {
+    transform: translate3d(150px, 80px, -150px) rotate3d(1, 1, 1, 180deg);
+  }
+  60% {
+    transform: translate3d(120px, 100px, -120px) rotate3d(1, 1, 1, 216deg);
+  }
+  70% {
+    transform: translate3d(90px, 120px, -90px) rotate3d(1, 1, 1, 252deg);
+  }
+  80% {
+    transform: translate3d(60px, 140px, -60px) rotate3d(1, 1, 0, 288deg);
+  }
+  90% {
+    transform: translate3d(30px, 160px, -30px) rotate3d(1, 0, 0, 324deg);
+  }
+  100% {
+    transform: translate3d(0px, 180px, 0px) rotate3d(1, 0, 0, 360deg);
+  }
+}

package/dist/templates/card-poetry/src/styles.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/templates/card-poetry/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx,css}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/dist/templates/card-poetry/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import { vitePluginEditframe } from "@editframe/vite-plugin";
+import path from "node:path";
+
+export default defineConfig({
+  plugins: [
+    vitePluginEditframe({
+      root: path.join(__dirname, "src"),
+      cacheRoot: path.join(__dirname, "src", "assets"),
+    }),
+    viteSingleFile(),
+  ],
+});

package/dist/templates/react-demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Card Poetry</title>
+    <script type="module" src="./src/main.tsx"></script>
+    <link rel="stylesheet" href="./src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/templates/react-demo/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "card-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "editframe preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@editframe/cli": "0.6.0-beta.21",
+    "@editframe/react": "0.6.0-beta.21",
+    "@editframe/vite-plugin": "0.6.0-beta.21",
+    "@vitejs/plugin-react": "^4.3.1",
+    "tailwindcss": "^3.4.3",
+    "vite": "^5.2.11",
+    "vite-plugin-singlefile": "^2.0.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0"
+  }
+}

package/dist/templates/react-demo/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

package/dist/templates/react-demo/src/Video.tsx

@@ -0,0 +1,62 @@
+import { EFTimegroup, EFAudio, EFImage, useTimingInfo } from "@editframe/react";
+
+interface CardInfo {
+  title: string;
+  id: string;
+}
+
+const cards: CardInfo[] = [
+  {
+    title: "9 Of Spades",
+    id: "card-9-spades",
+  },
+  {
+    title: "King of Clubs",
+    id: "card-king-clubs",
+  },
+  {
+    title: "Queen of Spades",
+    id: "card-queen-spades",
+  },
+  {
+    title: "The Joker",
+    id: "card-joker",
+  },
+];
+
+const CardSegment = ({ title, id }: CardInfo) => {
+  const { ownCurrentTimeMs, durationMs, percentComplete, ref } =
+    useTimingInfo();
+
+  return (
+    <EFTimegroup mode="contain" ref={ref}>
+      <div className="absolute flex flex-col items-center justify-center z-10">
+        <h1 className="text-4xl p-4">{title}</h1>
+        <EFAudio id={id} src={`/assets/cards/${id}.mp3`} />
+        <EFImage src={`/assets/cards/${id}.png`} className="w-1/4" />
+        <code>
+          {(ownCurrentTimeMs / 1000).toFixed(2)}s /{" "}
+          {(durationMs / 1000).toFixed(2)}s
+        </code>
+        <progress max="1" value={percentComplete} className="h-[10px]" />
+      </div>
+      <EFImage
+        src={`/assets/cards/${id}.png`}
+        className="absolute z-0 blur-lg opacity-20 "
+      />
+    </EFTimegroup>
+  );
+};
+
+export const Video = () => {
+  return (
+    <EFTimegroup
+      className="w-[500px] h-[500px] bg-slate-200 flex items-center justify-center relative overflow-hidden"
+      mode="sequence"
+    >
+      {cards.map((card) => (
+        <CardSegment key={card.id} {...card} />
+      ))}
+    </EFTimegroup>
+  );
+};