frameyard 0.8.0 → 0.9.0

package/examples/intro/compositions/opening.html

@@ -0,0 +1,504 @@
+<link rel="stylesheet" href="./theme.css" />
+<script type="application/json" data-fy="props">
+  {
+    "eyebrow": "AUTHOR / 01",
+    "lineOne": "THE WEB",
+    "lineTwo": "is the",
+    "emphasis": "studio.",
+    "note": "Compose in HTML and CSS. Control every frame.",
+    "artifact": "composition.html",
+    "accent": "#b8f36b"
+  }
+</script>
+<style>
+  .scene {
+    background: radial-gradient(circle at 74% 46%, rgba(184, 243, 107, 0.095), transparent 34%), #06080b;
+  }
+  .content {
+    position: absolute;
+    inset: 0;
+    animation: scene-out 1s linear both;
+  }
+  .dot-grid {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(242, 245, 238, 0.085) 1px, transparent 1.2px);
+    background-size: 30px 30px;
+    mask-image: radial-gradient(ellipse at 72% 48%, black 0%, transparent 68%);
+    opacity: 0.55;
+  }
+  .halo {
+    position: absolute;
+    left: 690px;
+    top: -110px;
+    width: 1260px;
+    height: 1260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(184, 243, 107, 0.12), transparent 62%);
+    filter: blur(20px);
+  }
+  .divider {
+    position: absolute;
+    left: 982px;
+    top: 146px;
+    bottom: 170px;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(242, 245, 238, 0.18) 14%,
+      rgba(242, 245, 238, 0.18) 86%,
+      transparent
+    );
+    transform-origin: top center;
+    animation: draw-y 1s ease-out both;
+  }
+  .divider::before {
+    content: "";
+    position: absolute;
+    left: -2px;
+    top: 0;
+    width: 5px;
+    height: 5px;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+  }
+  .hero {
+    position: absolute;
+    left: 148px;
+    top: 144px;
+    width: 780px;
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    margin-bottom: 54px;
+    color: var(--accent);
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .eyebrow::before {
+    content: "";
+    width: 36px;
+    height: 1px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+  }
+  .headline {
+    margin: 0;
+    color: var(--paper);
+  }
+  .line {
+    display: block;
+    overflow: hidden;
+    padding-bottom: 0.04em;
+  }
+  .line-one {
+    font-size: 128px;
+    line-height: 0.88;
+    font-weight: 660;
+    letter-spacing: -0.058em;
+  }
+  .line-one .mono {
+    display: inline-block;
+    animation: line-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .line-two {
+    margin-top: 10px;
+    font-size: 150px;
+    line-height: 0.9;
+    letter-spacing: -0.018em;
+  }
+  .line-two .serif {
+    display: inline-block;
+    transform: translateY(-0.02em);
+    animation: line-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .line-two .accent {
+    position: relative;
+  }
+  .line-two .accent::after {
+    content: "";
+    position: absolute;
+    left: 0.04em;
+    right: -0.02em;
+    bottom: 0.02em;
+    height: 2px;
+    background: var(--accent);
+    opacity: 0.55;
+    transform-origin: left center;
+    box-shadow: 0 0 14px var(--accent);
+    animation: wipe-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation-delay: 1.1s;
+  }
+  .note {
+    margin: 52px 0 0;
+    max-width: 700px;
+    color: #9ca8a1;
+    font-size: 33px;
+    line-height: 1.5;
+    font-weight: 400;
+    letter-spacing: -0.01em;
+    animation: rise-in 1s ease-out both;
+  }
+  .spec {
+    position: absolute;
+    left: 148px;
+    right: 148px;
+    bottom: 142px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 48px;
+    color: var(--muted);
+    font-size: 15px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .spec::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -24px;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(242, 245, 238, 0.24), rgba(242, 245, 238, 0.06) 68%, transparent);
+  }
+  .spec b {
+    color: var(--paper);
+    font-weight: 500;
+  }
+  .spec-tags {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+  }
+  .spec-tags span {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .spec-tags span::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background: var(--accent);
+  }
+  .artifact {
+    position: absolute;
+    left: 1030px;
+    top: 264px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--muted-strong);
+    font-size: 15px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .artifact::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+  }
+  .artifact small {
+    margin-left: 10px;
+    color: var(--muted);
+    font-size: 12px;
+    letter-spacing: 0.12em;
+  }
+  .preview-float {
+    position: absolute;
+    left: 1030px;
+    top: 306px;
+    width: 740px;
+    height: 416px;
+    animation: drift 9s ease-in-out infinite;
+  }
+  .preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid rgba(242, 245, 238, 0.22);
+    border-radius: 5px;
+    background: #080c10;
+    box-shadow:
+      0 54px 140px rgba(0, 0, 0, 0.58),
+      0 0 0 1px rgba(184, 243, 107, 0.06),
+      0 0 80px rgba(184, 243, 107, 0.06);
+    animation: card-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .preview-toolbar {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    padding: 0 20px;
+    border-bottom: 1px solid rgba(242, 245, 238, 0.1);
+    background: rgba(8, 12, 16, 0.86);
+    color: var(--muted);
+    font-size: 12px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .preview-toolbar span {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .preview-toolbar span::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--accent);
+  }
+  .preview-stage {
+    position: absolute;
+    inset: 40px 0 0;
+    overflow: hidden;
+    background:
+      linear-gradient(90deg, rgba(8, 12, 16, 0.94) 0%, rgba(8, 12, 16, 0.62) 44%, transparent 74%),
+      radial-gradient(circle at 76% 42%, rgba(184, 243, 107, 0.18), transparent 34%), #070b0f;
+  }
+  .preview-grid {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(90deg, rgba(242, 245, 238, 0.055) 1px, transparent 1px),
+      linear-gradient(0deg, rgba(242, 245, 238, 0.045) 1px, transparent 1px);
+    background-size: 74px 74px;
+    mask-image: radial-gradient(ellipse at 72% 45%, black, transparent 76%);
+  }
+  .preview-orb {
+    position: absolute;
+    right: -84px;
+    top: 14px;
+    width: 380px;
+    height: 380px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 38% 34%, #e4ffc4 0%, var(--accent) 34%, #5f8f24 74%, #1a2d0b 100%);
+    box-shadow: 0 0 120px rgba(184, 243, 107, 0.24);
+    animation: glow-pulse 6s ease-in-out infinite;
+  }
+  .preview-orb::after {
+    content: "";
+    position: absolute;
+    inset: -46px;
+    border: 1px solid rgba(184, 243, 107, 0.28);
+    border-radius: 50%;
+  }
+  .preview-ring {
+    position: absolute;
+    right: 4px;
+    top: 74px;
+    width: 280px;
+    height: 280px;
+    border: 1px dashed rgba(242, 245, 238, 0.16);
+    border-radius: 50%;
+  }
+  .preview-kicker {
+    position: absolute;
+    left: 28px;
+    top: 24px;
+    color: var(--muted-strong);
+    font-size: 12px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+  }
+  .preview-copy {
+    position: absolute;
+    left: 28px;
+    bottom: 52px;
+  }
+  .preview-line1 {
+    color: var(--paper);
+    font-size: 58px;
+    line-height: 0.86;
+    font-weight: 650;
+    letter-spacing: -0.045em;
+  }
+  .preview-line2 {
+    margin-top: 4px;
+    color: var(--accent);
+    font-size: 70px;
+    line-height: 0.8;
+    letter-spacing: -0.02em;
+  }
+  .preview-line3 {
+    margin-top: 18px;
+    color: var(--muted-strong);
+    font-size: 13px;
+    letter-spacing: 0.26em;
+    text-transform: uppercase;
+  }
+  .preview-meta {
+    position: absolute;
+    left: 28px;
+    right: 28px;
+    bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    color: var(--muted-strong);
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
+  }
+  .preview-progress {
+    position: absolute;
+    left: 28px;
+    bottom: 14px;
+    width: 180px;
+    height: 1px;
+    background: rgba(242, 245, 238, 0.14);
+  }
+  .preview-progress i {
+    display: block;
+    width: 64%;
+    height: 100%;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+  }
+  .preview-scan {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 110px;
+    background: linear-gradient(180deg, transparent, rgba(184, 243, 107, 0.085), transparent);
+    animation: scan-down 4.5s linear infinite;
+    pointer-events: none;
+  }
+  .preview-tag {
+    position: absolute;
+    left: 1030px;
+    top: 750px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--muted);
+    font-size: 14px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .preview-tag::before {
+    content: "";
+    width: 22px;
+    height: 1px;
+    background: var(--accent);
+  }
+  .preview-tag b {
+    color: var(--muted-strong);
+    font-weight: 500;
+  }
+</style>
+<fy-composition duration-in-frames="300">
+  <div class="scene">
+    <div class="dot-grid"></div>
+    <div class="halo"></div>
+    <div class="content" data-fy-anim-start="264" data-fy-anim-duration="30" data-fy-anim-easing="linear">
+      <div
+        class="divider"
+        data-fy-anim-start="40"
+        data-fy-anim-duration="56"
+        data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+      ></div>
+
+      <div class="hero">
+        <div class="eyebrow mono" data-fy-anim-start="0" data-fy-anim-duration="44" data-fy-anim-easing="ease-out">
+          <span data-fy-text="eyebrow"></span>
+        </div>
+        <h1 class="headline">
+          <span class="line line-one">
+            <span
+              class="mono"
+              data-fy-text="lineOne"
+              data-fy-anim-start="12"
+              data-fy-anim-duration="60"
+              data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            ></span>
+          </span>
+          <span class="line line-two">
+            <span
+              class="serif"
+              data-fy-anim-start="30"
+              data-fy-anim-duration="68"
+              data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            >
+              <span data-fy-text="lineTwo"></span> <span class="accent" data-fy-text="emphasis"></span>
+            </span>
+          </span>
+        </h1>
+        <p
+          class="note"
+          data-fy-text="note"
+          data-fy-anim-start="60"
+          data-fy-anim-duration="52"
+          data-fy-anim-easing="ease-out"
+        ></p>
+      </div>
+
+      <div class="artifact mono" data-fy-anim-start="24" data-fy-anim-duration="48" data-fy-anim-easing="ease-out">
+        <span data-fy-text="artifact"></span>
+        <small>16:9 · 60 FPS</small>
+      </div>
+
+      <div class="preview-float">
+        <div
+          class="preview"
+          data-fy-anim-start="28"
+          data-fy-anim-duration="72"
+          data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+        >
+          <div class="preview-toolbar mono">
+            <span>preview / 001</span>
+            <span>1920 × 1080</span>
+          </div>
+          <div class="preview-stage">
+            <div class="preview-grid"></div>
+            <div class="preview-orb"></div>
+            <div class="preview-ring"></div>
+            <div class="preview-kicker mono">SCENE / 001</div>
+            <div class="preview-copy">
+              <div class="preview-line1">ONE</div>
+              <div class="preview-line2 serif">frame</div>
+              <div class="preview-line3 mono">at a time</div>
+            </div>
+            <div class="preview-meta mono">
+              <span>HTML · CSS · CANVAS</span>
+              <span>frame-seeked</span>
+            </div>
+            <div class="preview-progress"><i></i></div>
+            <div class="preview-scan"></div>
+          </div>
+        </div>
+      </div>
+      <div class="preview-tag mono" data-fy-anim-start="76" data-fy-anim-duration="44" data-fy-anim-easing="ease-out">
+        <b>&lt;fy-composition&gt;</b>
+        <span>one root · one optional controller</span>
+      </div>
+
+      <div class="spec mono" data-fy-anim-start="80" data-fy-anim-duration="48" data-fy-anim-easing="ease-out">
+        <div><b>HTML in.</b> &nbsp;Frames out.</div>
+        <div class="spec-tags">
+          <span>CSS</span>
+          <span>SVG</span>
+          <span>Canvas</span>
+          <span>WAAPI</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</fy-composition>