@editframe/create 0.40.6 → 0.41.0

package/dist/templates/animejs/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "simple-demo",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "start": "editframe preview"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@editframe/cli": "0.40.6",
-    "@editframe/elements": "0.40.6",
-    "@editframe/vite-plugin": "0.40.6",
-    "animejs": "^4.2.2",
-    "prismjs": "^1.30.0",
-    "tailwindcss": "^3.4.3",
-    "vite": "^6.3.5",
-    "vite-plugin-singlefile": "^2.0.1"
-  }
-}

package/dist/templates/animejs/postcss.config.cjs

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

package/dist/templates/animejs/src/index.ts

@@ -1,174 +0,0 @@
-import "@editframe/elements";
-import "@editframe/elements/styles.css";
-import {
-  animate,
-  svg,
-  splitText,
-  stagger,
-  createTimeline,
-  waapi,
-} from "animejs";
-import Prism from "prismjs";
-import "prismjs/themes/prism-tomorrow.css";
-import "prismjs/components/prism-javascript";
-
-// ============================================================================
-// Section 1: Text intro animation
-// ============================================================================
-const { chars } = splitText("#text-intro h2", { words: false, chars: true });
-
-const textAnimation = animate(chars, {
-  y: [
-    { to: "-2.75rem", ease: "outExpo", duration: 600 },
-    { to: 0, ease: "outBounce", duration: 800, delay: 100 },
-  ],
-  rotate: {
-    from: "-1turn",
-    delay: 0,
-  },
-  delay: stagger(50),
-  ease: "inOutCirc",
-  autoplay: false,
-});
-
-const textIntroTimegroup = document.querySelector("#text-intro")!;
-textIntroTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
-  textAnimation.currentTime = ownCurrentTimeMs;
-});
-
-// ============================================================================
-// Section 2: Timeline animation with pyramid shapes
-// ============================================================================
-const timeline = createTimeline({
-  defaults: { duration: 750 },
-  autoplay: false,
-});
-
-timeline
-  .label("start")
-  .add(".square", { x: "15rem" }, 500)
-  .add(".circle", { x: "15rem" }, "start")
-  .add(".triangle", { x: "15rem", rotate: "1turn" }, "<-=500");
-
-const pyramidTimegroup = document.querySelector("#pyramid")!;
-pyramidTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
-  timeline.currentTime = ownCurrentTimeMs;
-});
-
-// ============================================================================
-// Section 3: WAAPI animation
-// ============================================================================
-const { chars: waapiChars } = splitText("#waapi-demo h2", {
-  words: false,
-  chars: true,
-});
-
-const waapiAnimation = waapi.animate(waapiChars, {
-  translate: `0 -2rem`,
-  delay: stagger(100),
-  duration: 600,
-  alternate: true,
-  loop: true,
-  ease: "inOut(2)",
-  autoplay: false,
-});
-
-const waapiTimegroup = document.querySelector("#waapi-demo")!;
-waapiTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
-  waapiAnimation.currentTime = ownCurrentTimeMs;
-});
-
-// ============================================================================
-// Section 4: Motion path and line drawing animations
-// ============================================================================
-const carAnimation = animate(".car", {
-  ease: "linear",
-  duration: 5000,
-  autoplay: false,
-  ...svg.createMotionPath("#suzuka"),
-});
-
-const lineAnimation = animate(svg.createDrawable("#suzuka"), {
-  draw: "0 1",
-  ease: "linear",
-  duration: 5000,
-  autoplay: false,
-});
-
-const racetrackTimegroup = document.querySelector("#racetrack")!;
-racetrackTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
-  carAnimation.currentTime = ownCurrentTimeMs;
-  lineAnimation.currentTime = ownCurrentTimeMs;
-});
-
-// ============================================================================
-// Transitions timeline controlling all section slide animations
-// ============================================================================
-const transitionsTimeline = createTimeline({
-  autoplay: false,
-  defaults: {
-    ease: "linear",
-  },
-});
-
-// Add all transitions to the timeline with proper timing
-// text-intro: starts at 0, stays until 2750ms, slides out
-transitionsTimeline
-  .add(
-    "#text-intro",
-    {
-      keyframes: [
-        { x: "0%", duration: 2750 },
-        { x: "-100%", duration: 250 },
-      ],
-    },
-    0,
-  )
-  // pyramid: starts at 2500ms (0.5s overlap), slides in, stays, slides out
-  .add(
-    "#pyramid",
-    {
-      keyframes: [
-        { x: "100%", duration: 0 },
-        { x: "0%", duration: 250 },
-        { x: "0%", duration: 2500 },
-        { x: "-100%", duration: 250 },
-      ],
-    },
-    2500,
-  )
-  // waapi-demo: starts at 5000ms, slides in, stays, slides out
-  .add(
-    "#waapi-demo",
-    {
-      keyframes: [
-        { x: "100%", duration: 0 },
-        { x: "0%", duration: 250 },
-        { x: "0%", duration: 2500 },
-        { x: "-100%", duration: 250 },
-      ],
-    },
-    5000,
-  )
-  // racetrack: starts at 7500ms, slides in, stays
-  .add(
-    "#racetrack",
-    {
-      keyframes: [
-        { x: "100%", duration: 0 },
-        { x: "0%", duration: 250 },
-        { x: "0%", duration: 5750 },
-      ],
-    },
-    7500,
-  );
-
-const rootTimegroup = document.querySelector('ef-timegroup[mode="sequence"]')!;
-rootTimegroup.addFrameTask(({ currentTimeMs }) => {
-  transitionsTimeline.currentTime = currentTimeMs;
-});
-
-// ============================================================================
-// Highlight all code snippets with Prism
-// ============================================================================
-Prism.highlightAll();

package/dist/templates/animejs/src/styles.css

@@ -1,30 +0,0 @@
-@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/animejs/tailwind.config.cjs

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

package/dist/templates/animejs/vite.config.ts

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

package/dist/templates/card-poetry/index.html

@@ -1,119 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <script type="module" src="./src/index.js"></script>
-    <link rel="stylesheet" href="./src/styles.css" />
-    <link rel="stylesheet" href="./src/keyframes.css" />
-    <meta name="version" content="169" />
-  </head>
-  <body>
-    <ef-timegroup
-      workbench
-      mode="sequence"
-      class="h-[500px] w-[500px] overflow-scroll bg-slate-400"
-    >
-      <ef-timegroup
-        mode="contain"
-        class="absolute"
-        style="
-          animation:
-            fadein 1250ms backwards,
-            fadeout 500ms calc(var(--ef-duration) - 500ms) forwards;
-        "
-      >
-        <ef-audio
-          id="nine-spades-poem"
-          src="/assets/cards/card-9-spades.mp3"
-        ></ef-audio>
-        <div
-          class="absolute z-10 flex h-full w-full flex-col items-center justify-center"
-        >
-          <h1
-            class="mb-3 inline-block font-serif text-7xl font-extralight underline"
-            style="animation: 1s slide-in-left ease-out"
-          >
-            9 of Spades
-          </h1>
-          <ef-image
-            class="w-1/4"
-            src="/assets/cards/card-9-spades.png"
-            style="
-              animation-composition: add;
-              animation:
-                4s rotate 4s,
-                1s slide-in-left 0.25s ease-out backwards;
-            "
-          ></ef-image>
-          <ef-waveform
-            class="h-4 w-1/2 self-center"
-            target="nine-spades-poem"
-          ></ef-waveform>
-          <ef-captions
-            class="h-24 p-2 text-center text-4xl"
-            target="nine-spades-poem"
-            ><ef-captions-active-word
-              style="
-                animation: 0.1s bounce-in ease-out forwards;
-                animation-play-state: paused;
-              "
-            ></ef-captions-active-word
-          ></ef-captions>
-        </div>
-        <ef-image
-          class="absolute z-0 h-full opacity-20 blur-md"
-          src="/assets/cards/card-9-spades.png"
-          style="animation: 1.25s slide-in-left 0.25s ease-out backwards"
-        ></ef-image>
-      </ef-timegroup>
-      <ef-timegroup
-        mode="contain"
-        class="absolute"
-        style="
-          animation:
-            fadein 1250ms backwards,
-            fadeout 500ms calc(var(--ef-duration) - 500ms) forwards;
-        "
-      >
-        <ef-audio id="joker-poem" src="/assets/cards/card-joker.mp3"></ef-audio>
-        <div
-          class="absolute z-10 flex h-full w-full flex-col items-center justify-center"
-        >
-          <h1
-            class="mb-3 inline-block font-serif text-7xl font-extralight underline"
-            style="animation: 1s slide-in-left ease-out"
-          >
-            The Joker
-          </h1>
-          <ef-image
-            class="w-1/4"
-            src="/assets/cards/card-joker.png"
-            style="
-              animation-composition: add;
-              animation:
-                4s rotate 4s,
-                1s slide-in-left 0.25s ease-out backwards;
-            "
-          ></ef-image>
-          <ef-waveform
-            class="h-4 w-1/2 self-center"
-            target="joker-poem"
-          ></ef-waveform>
-          <ef-captions class="h-24 p-2 text-center text-4xl" target="joker-poem"
-            ><ef-captions-active-word
-              style="
-                animation: 0.1s bounce-in ease-out forwards;
-                animation-play-state: paused;
-              "
-            ></ef-captions-active-word
-          ></ef-captions>
-        </div>
-        <ef-image
-          class="absolute z-0 h-full opacity-20 blur-md"
-          src="/assets/cards/card-joker.png"
-          style="animation: 1.25s slide-in-left 0.25s ease-out backwards"
-        ></ef-image>
-      </ef-timegroup>
-    </ef-timegroup>
-  </body>
-</html>

package/dist/templates/card-poetry/package.json

@@ -1,21 +0,0 @@
-{
-  "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.40.6",
-    "@editframe/elements": "0.40.6",
-    "@editframe/vite-plugin": "0.40.6",
-    "tailwindcss": "^3.4.3",
-    "vite": "^6.3.5",
-    "vite-plugin-singlefile": "^2.0.1"
-  }
-}

package/dist/templates/card-poetry/postcss.config.cjs

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