/* ========================================================= The setup I recommend (#before, setup.js). Linked late in . A strip of four cards, each with a small picture of what it does: a Claude Code window with the model and effort set, a voice playing, Jev sorting described clips into piles, and the free kit folder opening. Plain paper cards; the tool that builds the video is the one dark card. Prefix su-. (.st-main stays: acts.js reads the setup from it.) Motion: setup.js adds .js-motion (motion allowed), .is-live (on screen: loops run) and .was-seen (once: the prompt types, the Model is picked, the folder opens). Without motion every picture shows its finished state. ========================================================= */ .su-strip { display: grid; grid-template-columns: minmax(0, 1.34fr) repeat(3, minmax(0, 1fr)); gap: 14px; } .su-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 10px 10px 24px; border-radius: var(--r-l); background: var(--card); color: var(--text); text-decoration: none; box-shadow: 0 0 0 1px oklch(0.185 0.01 70 / .08), 0 30px 60px -44px oklch(0.185 0.01 70 / .4); } .su-card.st-main { border-radius: var(--r-l); background: var(--ink); color: var(--on-dark-2); } .su-vis { position: relative; height: 176px; overflow: hidden; border-radius: 16px; background: var(--paper-2); } .su-txt { display: grid; align-content: start; gap: 10px; padding: 0 14px; } .su-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); } .su-role .ic { width: 16px; height: 16px; color: var(--signal-ink); } .st-main .su-role, .st-main .su-role .ic { color: var(--signal); } .su-title { display: flex; align-items: center; gap: 10px; } .su-opt { padding: 4px 8px; font: 500 10.5px/1 var(--mono); text-transform: uppercase; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font-style: normal; letter-spacing: .08em; color: var(--signal-ink); } .su-card h3 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; } .su-txt > p:last-of-type { margin: 0; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; } /* ---------- Claude Code: a window with the model and effort set ---------- */ .su-win { display: grid; grid-template-rows: auto auto 1fr; height: auto; min-height: 176px; background: var(--dark-2); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08); } .su-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid oklch(1 0 0 / .07); } .su-bar i { width: 8px; height: 8px; border-radius: 50%; background: oklch(1 0 0 / .16); } .su-bar b { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; padding-right: 34px; font: 500 12px/1 var(--sans); color: var(--on-dark-soft); } .su-bar img { width: 16px; height: 16px; border-radius: 4px; } .su-prompt { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 18px 16px 0; font: 400 13px/1.3 var(--mono); color: var(--on-dark-2); white-space: nowrap; } .su-chev { color: var(--signal); } .su-type { display: inline-block; min-width: 0; overflow: hidden; } .su-caret { flex: none; width: 7px; height: 15px; margin-left: -4px; border-radius: 1px; background: var(--signal); } .su-picks { display: flex; flex-wrap: wrap; align-content: end; gap: 8px; margin: 0; padding: 16px; } .su-picks div { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 11px; border-radius: 10px; background: var(--dark-3); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .09); transition: box-shadow .35s; } .su-picks div:first-child { box-shadow: inset 0 0 0 1.5px var(--signal); } .su-picks dt { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); } .su-picks dd { margin: 0; font: 700 14px/1 var(--sans); color: var(--on-dark); white-space: nowrap; } .su-picks .ic { width: 14px; height: 14px; margin-left: -2px; color: var(--on-dark-soft); } /* ---------- the voice: a line, playing ---------- */ .su-voice .su-vis { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 22px; } .su-play { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); } .su-play svg { width: 18px; height: 18px; margin-left: 2px; fill: var(--signal); } .su-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; max-width: 250px; height: 70px; } .su-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink); opacity: .78; transform: scaleY(var(--h)); } .su-wave i:nth-child(-n + 9) { background: var(--signal-strong); opacity: 1; } .su-meta { margin-top: 4px; padding-top: 12px; border-top: 1px solid oklch(0.185 0.01 70 / .1); font: 500 12.5px/1.4 var(--mono); letter-spacing: .03em; color: var(--mute); } .su-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; } .su-steps li { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.3; white-space: nowrap; } .su-steps li:not(:last-child)::after { content: ""; flex: none; width: 13px; height: 9px; margin: 0 7px 0 3px; background: var(--mute); clip-path: polygon(0 43%, 60% 43%, 60% 8%, 100% 50%, 60% 92%, 60% 57%, 0 57%); } .su-steps .ic { width: 15px; height: 15px; color: var(--signal-ink); } /* ---------- Jev: described clips sort into piles ---------- */ .su-sort { position: absolute; inset: 16px 18px; container-type: size; } .su-sort i { --k: var(--mid); position: absolute; left: 0; top: 0; width: 22cqw; height: 30cqh; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 5px 10px -6px oklch(0.185 0.01 70 / .35); transform: translate(calc(var(--ex) * 1cqw), calc(var(--ey) * 1cqh)) rotate(var(--er)); } .su-sort i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 6px 0 0 6px; background: var(--k); } /* a described clip: text, no picture (Jev reads, it cannot watch) */ .su-sort i::after { content: ""; position: absolute; left: 13px; right: 9px; top: 32%; height: 9px; background: linear-gradient(var(--mute), var(--mute)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--mute), var(--mute)) 0 7px / 62% 2px no-repeat; } .su-sort .ka { --k: var(--signal); } .su-sort .kb { --k: var(--ink); } /* ---------- the free kit: a folder that opens ---------- */ .su-kit .su-vis { display: grid; place-items: end center; } .su-folder { position: relative; width: min(74%, 196px); aspect-ratio: 1.42; margin-bottom: 16px; perspective: 560px; } .su-back { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; border-radius: 5px 12px 12px 12px; background: var(--signal-strong); } .su-back::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 40%; height: 13%; border-radius: 8px 8px 0 0; background: var(--signal-strong); } .su-item { position: absolute; bottom: 30%; display: grid; place-items: center; border-radius: 6px; box-shadow: 0 8px 14px -10px oklch(0.185 0.01 70 / .6); transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .su-item b { font: 500 11px/1 var(--mono); letter-spacing: .04em; } .su-video { left: 6%; width: 42%; aspect-ratio: 16 / 10; background: var(--ink); transform: translateY(-34%) rotate(-7deg); } .su-video svg { width: 30%; fill: var(--signal); } .su-video b { position: absolute; left: 7px; top: 6px; font-size: 9px; color: var(--on-dark-2); } .su-sheet { left: 38%; width: 28%; aspect-ratio: 3 / 4; background: var(--card); transform: translateY(-22%) rotate(2deg); transition-delay: .06s; background-image: linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)); background-size: 64% 2px, 64% 2px, 44% 2px; background-position: 18% 18%, 18% 29%, 18% 40%; background-repeat: no-repeat; } .su-prompts { left: 64%; width: 28%; aspect-ratio: 4 / 5; background: var(--paper); transform: translateY(-12%) rotate(8deg); transition-delay: .12s; background-image: linear-gradient(var(--signal), var(--signal)); background-size: 36% 3px; background-position: 18% 20%; background-repeat: no-repeat; } .su-sheet b, .su-prompts b { position: absolute; left: 0; right: 0; bottom: 14%; font: 560 20px/1 var(--display); color: var(--ink); text-align: center; } .su-front { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 10px; background: var(--signal); transform-origin: 50% 100%; transform: rotateX(-26deg); transition: transform .8s cubic-bezier(.2, .8, .2, 1); } .su-kit h3 { display: flex; align-items: center; gap: 8px; transition: color .2s; } .su-arrow { width: 18px; height: 18px; stroke-width: 2.2; color: var(--signal-ink); transition: transform .25s; } .su-kit:hover h3 { color: var(--signal-ink); } .su-kit:hover .su-arrow { transform: translateY(3px); } .su-kit:hover .su-front { transform: rotateX(-36deg); } .su-kit:hover .su-video { transform: translateY(-46%) rotate(-9deg); } .su-kit:hover .su-sheet { transform: translateY(-32%) rotate(3deg); } .su-kit:hover .su-prompts { transform: translateY(-22%) rotate(10deg); } .su-kit:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; } /* ---------- motion (only when allowed; setup.js sets the classes) ---------- */ @media (prefers-reduced-motion: no-preference) { /* before the strip is seen: the prompt is empty, nothing is picked, the folder is shut */ .su-strip.js-motion:not(.was-seen) .su-type { width: 0; } .su-strip.js-motion:not(.was-seen) .su-picks div:first-child { box-shadow: inset 0 0 0 1px oklch(1 0 0 / .09); } .su-strip.js-motion:not(.was-seen) .su-front { transform: none; } .su-strip.js-motion:not(.was-seen) .su-item { transform: translateY(30%) rotate(0deg); } /* once: the line types itself, then the Model is picked; the folder opens */ .su-strip.was-seen .su-type { animation: su-type 1.4s steps(32, end) .35s both; } .su-strip.was-seen .su-picks div:first-child { transition-delay: 1.9s; } .su-strip.was-seen .su-front { transition-delay: .25s; } .su-strip.was-seen .su-item { transition-duration: .8s; } /* while on screen: the caret blinks, the voice plays, Jev sorts */ .su-strip.is-live .su-caret { animation: su-blink 1.05s steps(1) infinite; } .su-strip.is-live .su-wave i { animation: su-level 1.1s ease-in-out infinite alternate; } .su-wave i:nth-child(3n) { animation-delay: -.35s; } .su-wave i:nth-child(3n + 1) { animation-delay: -.7s; } .su-wave i:nth-child(4n) { animation-duration: .8s; } .su-wave i:nth-child(5n + 2) { animation-duration: 1.35s; } .su-strip.is-live .su-sort i { animation: su-sort 7.5s cubic-bezier(.55, 0, .25, 1) calc(var(--d) - 3.2s) infinite; } } @keyframes su-type { from { width: 0; } to { width: 32ch; } } @keyframes su-blink { 50% { opacity: 0; } } @keyframes su-level { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(var(--h) * .3 + .08)); } } @keyframes su-sort { 0%, 10% { opacity: 1; transform: translate(calc(var(--sx) * 1cqw), calc(var(--sy) * 1cqh)) rotate(var(--sr)); } 30%, 84% { opacity: 1; transform: translate(calc(var(--ex) * 1cqw), calc(var(--ey) * 1cqh)) rotate(var(--er)); } 92% { opacity: 0; transform: translate(calc(var(--ex) * 1cqw), calc(var(--ey) * 1cqh - 4cqh)) rotate(var(--er)); } 93% { opacity: 0; transform: translate(calc(var(--sx) * 1cqw), calc(var(--sy) * 1cqh)) rotate(var(--sr)); } 100% { opacity: 1; transform: translate(calc(var(--sx) * 1cqw), calc(var(--sy) * 1cqh)) rotate(var(--sr)); } } /* ---------- narrower screens ---------- */ @media (max-width: 1100px) { .su-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .su-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; } .su-card { gap: 16px; padding: 8px 8px 20px; } .su-vis { height: 134px; } .su-win { min-height: 134px; } .su-prompt { padding-top: 14px; } .su-picks { padding: 12px 14px 14px; } .su-txt { padding: 0 12px; } }