frameyard 0.7.0 → 0.9.0

package/examples/intro/assets/fonts/instrument-serif/LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif) InstrumentSerif-Italic.ttf: Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/examples/intro/assets/fonts/space-mono/LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Space Mono Project Authors (https://github.com/googlefonts/spacemono) SpaceMono-Italic.ttf: Copyright 2016 The Space Mono Project Authors (https://github.com/googlefonts/spacemono) SpaceMono-Bold.ttf: Copyright 2016 The Space Mono Project Authors (https://github.com/googlefonts/spacemono) SpaceMono-BoldItalic.ttf: Copyright 2016 The Space Mono Project Authors (https://github.com/googlefonts/spacemono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/examples/intro/compositions/brand.html

@@ -0,0 +1,412 @@
+<link rel="stylesheet" href="./theme.css" />
+<script type="application/json" data-fy="props">
+  {
+    "eyebrow": "FRAMEYARD / 04",
+    "tagline": "Deterministic video,",
+    "taglineTwo": "authored with the web platform.",
+    "meta": "Local-first · Frame-exact · HTML + JSON",
+    "accent": "#b8f36b"
+  }
+</script>
+<style>
+  @keyframes mark-in {
+    from {
+      opacity: 0;
+      transform: scale(0.28) rotate(-9deg);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) rotate(0deg);
+    }
+  }
+  @keyframes sheen {
+    from {
+      transform: translateX(-140%);
+    }
+    to {
+      transform: translateX(140%);
+    }
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spin-reverse {
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  .scene {
+    background: radial-gradient(circle at 50% 38%, rgba(184, 243, 107, 0.075), transparent 33%), #06080b;
+  }
+  .cross {
+    position: absolute;
+    inset: 0;
+    opacity: 0.55;
+  }
+  .cross::before,
+  .cross::after {
+    content: "";
+    position: absolute;
+    background: rgba(242, 245, 238, 0.07);
+  }
+  .cross::before {
+    left: 50%;
+    top: 110px;
+    bottom: 150px;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(242, 245, 238, 0.08) 18%,
+      rgba(242, 245, 238, 0.08) 82%,
+      transparent
+    );
+  }
+  .cross::after {
+    left: 220px;
+    right: 220px;
+    top: 50%;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(242, 245, 238, 0.07) 22%,
+      rgba(242, 245, 238, 0.07) 78%,
+      transparent
+    );
+  }
+  .ring {
+    position: absolute;
+    left: 50%;
+    top: 160px;
+    width: 600px;
+    height: 600px;
+    margin-left: -300px;
+    border: 1px solid rgba(242, 245, 238, 0.055);
+    border-radius: 50%;
+  }
+  .ring.dashed {
+    width: 744px;
+    height: 744px;
+    margin-left: -372px;
+    margin-top: -72px;
+    border: 1px dashed rgba(184, 243, 107, 0.12);
+    animation: spin 96s linear infinite;
+  }
+  .ring.outer {
+    width: 980px;
+    height: 980px;
+    margin-left: -490px;
+    margin-top: -190px;
+    border-color: rgba(242, 245, 238, 0.035);
+    animation: spin-reverse 140s linear infinite;
+  }
+  .glow {
+    position: absolute;
+    left: 50%;
+    top: 106px;
+    width: 1100px;
+    height: 760px;
+    margin-left: -550px;
+    background: radial-gradient(ellipse, rgba(184, 243, 107, 0.1), transparent 64%);
+    filter: blur(22px);
+    animation: glow-pulse 6.5s ease-in-out infinite;
+  }
+  .eyebrow {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 138px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+    color: var(--accent);
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.26em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .eyebrow::before,
+  .eyebrow::after {
+    content: "";
+    width: 30px;
+    height: 1px;
+    background: rgba(184, 243, 107, 0.55);
+  }
+  .mark {
+    position: absolute;
+    left: 50%;
+    top: 188px;
+    display: grid;
+    grid-template-columns: repeat(2, 108px);
+    grid-template-rows: repeat(2, 108px);
+    gap: 12px;
+    transform: translateX(-50%);
+  }
+  .cell {
+    border: 1px solid rgba(242, 245, 238, 0.42);
+    border-radius: 2px;
+    background: rgba(242, 245, 238, 0.015);
+    animation: mark-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .cell.fill {
+    border-color: var(--accent);
+    background: radial-gradient(circle at 38% 32%, #e6ffc7, var(--accent) 46%, #7cb633 100%);
+    box-shadow:
+      0 0 44px rgba(184, 243, 107, 0.32),
+      0 0 110px rgba(184, 243, 107, 0.14);
+  }
+  .wordmark-block {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 438px;
+    text-align: center;
+  }
+  .wordmark-mask {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    padding: 0 0.04em 0.1em;
+  }
+  .wordmark {
+    display: flex;
+    color: var(--paper);
+    font-size: 144px;
+    font-weight: 650;
+    line-height: 0.86;
+    letter-spacing: 0.045em;
+  }
+  .glyph {
+    display: inline-block;
+    animation: line-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .sheen {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(104deg, transparent 40%, rgba(184, 243, 107, 0.34) 50%, transparent 60%);
+    animation: sheen 1s ease-in-out both;
+    pointer-events: none;
+  }
+  .rule {
+    width: 520px;
+    height: 1px;
+    margin: 26px auto 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(184, 243, 107, 0.7) 18%,
+      rgba(184, 243, 107, 0.7) 82%,
+      transparent
+    );
+    box-shadow: 0 0 14px rgba(184, 243, 107, 0.34);
+    transform-origin: center;
+    animation: draw-x 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .tagline {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 630px;
+    text-align: center;
+    color: #c2ccc6;
+    font-family: "Instrument Serif", Georgia, serif;
+    font-style: italic;
+    font-size: 54px;
+    line-height: 1.16;
+    letter-spacing: -0.005em;
+    animation: rise-in 1s ease-out both;
+  }
+  .tagline b {
+    color: var(--paper);
+    font-weight: 400;
+  }
+  .chip {
+    position: absolute;
+    left: 50%;
+    top: 780px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    height: 58px;
+    padding: 0 28px;
+    border: 1px solid rgba(242, 245, 238, 0.22);
+    border-radius: 3px;
+    background: rgba(242, 245, 238, 0.035);
+    color: var(--paper);
+    font-size: 21px;
+    letter-spacing: 0.01em;
+    translate: -50% 0;
+    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
+    animation: rise-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .chip .prompt {
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .chip .slash {
+    width: 1px;
+    height: 24px;
+    background: rgba(242, 245, 238, 0.18);
+  }
+  .chip .hint {
+    color: var(--muted);
+    font-size: 13px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .chip-note {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 852px;
+    text-align: center;
+    color: rgba(139, 152, 146, 0.78);
+    font-size: 13px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    animation: fade-in 1s ease-out both;
+  }
+</style>
+<fy-composition duration-in-frames="330">
+  <div class="scene">
+    <div class="cross"></div>
+    <div class="glow"></div>
+    <div class="ring outer"></div>
+    <div class="ring"></div>
+    <div class="ring dashed"></div>
+
+    <div class="eyebrow mono" data-fy-anim-start="20" data-fy-anim-duration="40" data-fy-anim-easing="ease-out">
+      <span data-fy-text="eyebrow"></span>
+    </div>
+
+    <div class="mark">
+      <span
+        class="cell"
+        data-fy-anim-start="16"
+        data-fy-anim-duration="48"
+        data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+      ></span>
+      <span
+        class="cell fill"
+        data-fy-anim-start="24"
+        data-fy-anim-duration="48"
+        data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+      ></span>
+      <span
+        class="cell"
+        data-fy-anim-start="32"
+        data-fy-anim-duration="48"
+        data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+      ></span>
+      <span
+        class="cell"
+        data-fy-anim-start="40"
+        data-fy-anim-duration="48"
+        data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+      ></span>
+    </div>
+
+    <div class="wordmark-block">
+      <div class="wordmark-mask">
+        <div class="wordmark" aria-label="Frameyard">
+          <span
+            class="glyph"
+            data-fy-anim-start="48"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >F</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="54"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >R</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="60"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >A</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="66"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >M</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="72"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >E</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="78"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >Y</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="84"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >A</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="90"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >R</span
+          >
+          <span
+            class="glyph"
+            data-fy-anim-start="96"
+            data-fy-anim-duration="68"
+            data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >D</span
+          >
+        </div>
+        <div class="sheen" data-fy-anim-start="168" data-fy-anim-duration="60" data-fy-anim-easing="ease-in-out"></div>
+      </div>
+      <div
+        class="rule"
+        data-fy-anim-start="152"
+        data-fy-anim-duration="52"
+        data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+      ></div>
+    </div>
+
+    <div class="tagline" data-fy-anim-start="164" data-fy-anim-duration="56" data-fy-anim-easing="ease-out">
+      <span data-fy-text="tagline"></span><br />
+      <b data-fy-text="taglineTwo"></b>
+    </div>
+
+    <div
+      class="chip mono"
+      data-fy-anim-start="212"
+      data-fy-anim-duration="48"
+      data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+    >
+      <span class="prompt">$</span>
+      <span>npx frameyard init my-video</span>
+      <span class="slash"></span>
+      <span class="hint">start here</span>
+    </div>
+
+    <div class="chip-note mono" data-fy-anim-start="236" data-fy-anim-duration="36" data-fy-anim-easing="ease-out">
+      one command · ready to render
+    </div>
+  </div>
+</fy-composition>

package/examples/intro/compositions/chrome.controller.js

@@ -0,0 +1,63 @@
+const CHAPTERS = [
+  { start: 0, label: "01 / author" },
+  { start: 270, label: "02 / compose" },
+  { start: 570, label: "03 / render" },
+  { start: 870, label: "04 / frameyard" },
+];
+const CHAPTER_FADE = 12;
+
+let frameLabel;
+let timeLabel;
+let totalLabel;
+let chapterLabel;
+let fps = 60;
+let duration = 1200;
+
+function chapterAt(frame) {
+  let index = 0;
+  for (let i = 0; i < CHAPTERS.length; i += 1) {
+    if (frame >= CHAPTERS[i].start) {
+      index = i;
+    }
+  }
+  const entry = CHAPTERS[index];
+  const end = index + 1 < CHAPTERS.length ? CHAPTERS[index + 1].start : duration;
+  let alpha = 1;
+  if (frame < entry.start + CHAPTER_FADE) {
+    alpha = (frame - entry.start) / CHAPTER_FADE;
+  } else if (frame > end - CHAPTER_FADE) {
+    alpha = (end - frame) / CHAPTER_FADE;
+  }
+  return { label: entry.label, alpha: Math.min(1, Math.max(0, alpha)) };
+}
+
+export default {
+  mount({ root }) {
+    frameLabel = root.querySelector("#frame");
+    timeLabel = root.querySelector("#time");
+    totalLabel = root.querySelector("#total");
+    chapterLabel = root.querySelector("#chapter");
+    fps = Number(root.getAttribute("fps") ?? 60);
+    duration = Number(root.getAttribute("duration-in-frames") ?? 1200);
+    totalLabel.textContent = String(Math.max(0, duration - 1)).padStart(4, "0");
+  },
+
+  update({ frame }) {
+    frameLabel.textContent = String(frame).padStart(4, "0");
+    timeLabel.textContent = (frame / fps).toFixed(2) + " S";
+
+    const chapter = chapterAt(frame);
+    chapterLabel.textContent = chapter.label;
+    chapterLabel.style.opacity = chapter.alpha.toFixed(3);
+    chapterLabel.style.transform = `translateY(${((1 - chapter.alpha) * 4).toFixed(2)}px)`;
+  },
+
+  dispose() {
+    frameLabel = undefined;
+    timeLabel = undefined;
+    totalLabel = undefined;
+    chapterLabel = undefined;
+    fps = 60;
+    duration = 1200;
+  },
+};