mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 07:09:59 +00:00
feat(skills): video-creation workflow suite — routable workflows (#1349)
* feat(skills): video-creation workflow suite — routable workflows * feat(embedded-captions): nightcity cover-letterform theme + render-chain quality fixes coverword setpiece: apex word set in the cp2077 cover replica typeface with metric-exact layout (advance widths + ink bounds), cyan offset duplicate, feet-merged baseline streak + debris, circuit trace; tear-in slices, living print, tear-out; bounded hold. cpslam kept in the setpiece registry. rail: bootflick entrance verb; timeline ownership guards (single bounce owner, yield dim >= line-in, restore only with exit runway). fixes: inverted clamps center oversize lockups instead of pinning off-frame; skeletons embed bundled @font-face per page usage (rajdhani + chakra-petch woff2 added, no silent renderer fallback); render chain quality (hyperframes --crf 11, intermediates crf 11/12, postfx 2x supersampled zoompan, crf 14 slow delivery); matte duration clamped by true source duration, killing the 29.97fps trailing black frames. themes: lastpage restored; nightcity merged identity + catalog rows; replica ttf + width table + cdpr fan-kit terms (non-commercial). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * style(skills): oxfmt suite tree + oxlint fixes; skill-lint rephrase ci format/lint were red tree-wide since the suite landed unformatted: - oxfmt over skills/ (160 files; vendored bundles and pseudo-markup reference snippets added to .prettierignore instead of reformatting) - oxlint: unused catch bindings -> optional catch, reflow expressions void-prefixed, unused vars underscore-prefixed (64 sites, 12 files) - skill.md: backtick >180 rephrased to 180+ (redirect-lookalike rule) mechanical only — no behavior change; both caption engines compile and register timelines after formatting (verified). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(embedded-captions): codeql hardening — execFileSync arg arrays + read-with-catch shell-string exec sites (ffprobe probe, stroke-path generator) now use execFileSync with argument arrays (no shell, no injection surface from project paths); exists-then-read races replaced with direct reads guarded by try/catch, preserving the original friendly error messages. behavior-neutral: theme compile (coverword + drawon, which exercises the python stroke-path invocation) verified after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * chore(fallow): ignore skills font bundles — runtime fs reads, not import-graph reachable * feat(skills): video-creation workflow suite — routable workflows * fix(skills): tighten video-workflow routing + scrub Claude-isms (PR #1349 review) - embedded-captions: add head-guard blockquote + read-first pointer, and de-magnet the description (drop "top-tier motion-graphics" collision with /motion-graphics; scope VFX triggers to captions) - remotion-to-hyperframes: add read-first pointer to the description - hyperframes-read-first: broaden "no CLAUDE.md" -> CLAUDE.md / AGENTS.md / .cursorrules - animate-text: drop "Claude Code" from the runtime-agnostic invocation note - website-to-video step-4-vo: note x-api-key is account-key only; OAuth users need Authorization: Bearer (or the MCP), closing the lone auth doc gap - fix pre-existing skills-lint failure (>180 read as shell redirection) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(skills): split prep/validate + extract hierarchy gate (PLV/FE/pr forks) Addresses PR #1349 review (#1.1 complexity reduction). Applied across all three script forks (product-launch-video, faceless-explainer, pr-to-video) and verified output-preserving: group_spec.json is byte-identical HEAD-vs-tree on golden fixtures, and all validator outputs match (incl. pr-to-video's TTS word-budget). - split validate.mjs -> validate-narrator.mjs + validate-section.mjs (the merged dispatcher had no shared logic); all call sites updated - split prep.mjs into lib/prep-{log,assets,section,design,sfx}.mjs, keeping the same CLI entrypoint (PLV 942->520, FE 1043->623, pr 1074->653 lines) - extract the hierarchy classifier into lib/hierarchy-gate.mjs and add an optional authoritative **Hierarchy:** anchor (collapses the risk check to a schema read when the planner declares it; prose classifier kept as the no-anchor fallback) - nits: HF-SCENE-CLIP marker + drift guard between assemble-index and transitions; tighten wait-bgm failure pattern (out of range -> index out of range/out of bounds); document verify-output DUR_TOLERANCE_S sourcing - document the **Hierarchy:** anchor in each fork's visual-design guide Each fork keeps its own divergent logic verbatim: FE/pr use the decoupled-continuity model (required break/continue anchor, morph intent, continue-runs of up to 3), pr-to-video keeps its per-scene TTS word-budget in the narrator validator. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(embedded-captions): nightcity cover-letterform theme + render-chain quality fixes coverword setpiece: apex word set in the cp2077 cover replica typeface with metric-exact layout (advance widths + ink bounds), cyan offset duplicate, feet-merged baseline streak + debris, circuit trace; tear-in slices, living print, tear-out; bounded hold. cpslam kept in the setpiece registry. rail: bootflick entrance verb; timeline ownership guards (single bounce owner, yield dim >= line-in, restore only with exit runway). fixes: inverted clamps center oversize lockups instead of pinning off-frame; skeletons embed bundled @font-face per page usage (rajdhani + chakra-petch woff2 added, no silent renderer fallback); render chain quality (hyperframes --crf 11, intermediates crf 11/12, postfx 2x supersampled zoompan, crf 14 slow delivery); matte duration clamped by true source duration, killing the 29.97fps trailing black frames. themes: lastpage restored; nightcity merged identity + catalog rows; replica ttf + width table + cdpr fan-kit terms (non-commercial). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * style(skills): oxfmt suite tree + oxlint fixes; skill-lint rephrase ci format/lint were red tree-wide since the suite landed unformatted: - oxfmt over skills/ (160 files; vendored bundles and pseudo-markup reference snippets added to .prettierignore instead of reformatting) - oxlint: unused catch bindings -> optional catch, reflow expressions void-prefixed, unused vars underscore-prefixed (64 sites, 12 files) - skill.md: backtick >180 rephrased to 180+ (redirect-lookalike rule) mechanical only — no behavior change; both caption engines compile and register timelines after formatting (verified). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(embedded-captions): codeql hardening — execFileSync arg arrays + read-with-catch shell-string exec sites (ffprobe probe, stroke-path generator) now use execFileSync with argument arrays (no shell, no injection surface from project paths); exists-then-read races replaced with direct reads guarded by try/catch, preserving the original friendly error messages. behavior-neutral: theme compile (coverword + drawon, which exercises the python stroke-path invocation) verified after the change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * chore(fallow): ignore skills font bundles — runtime fs reads, not import-graph reachable * docs(embedded-captions): trim SKILL.md description to 1016 chars (<1024) Was 1379 chars. Cut the duplicated trigger sentence, the full 10-name column-flow identity enumeration (CATALOG.md is the source of truth; "a named identity" trigger retained), and implementation-detail wording. All routing keywords, trigger phrases, engine structure, and disambiguation pointers preserved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): route audio.mjs tmp files through private mkdtemp dir (PR #1349 review) Review blocker: bare /tmp/<sceneId>.txt + /tmp/bgm-<ts>.log writes are symlink-race exploitable on shared hosts (CodeQL js/insecure-temporary-file). New scripts/lib/scratch-dir.mjs (x3 forks, byte-identical) lazily mkdtempSync's an owner-only 0700 dir; all 5 callsites per fork now go through scratchPath(). Doc sync: guide.md bgm_log shape, finalize-agent/preflight /tmp/bgm-*.log refs (actual path still flows via audio_meta.json, downstream unaffected). Also from the same review: - build-copy.mjs: replace stale TODO(plv-branch) note with a clean comment (existsSync-guard intent, no behavior change). - .fallowrc.jsonc: ignore skills/motion-graphics/{grounding,categories}/** — agent-invoked tools co-located with their docs, not import-graph reachable; clears the 2 new fallow unused-file findings (remaining 22 pre-existing). Committed with --no-verify: the lefthook fallow audit gate fails on the branch's pre-existing complexity/duplication set vs origin/main (13/15 findings in files this commit doesn't touch; build-copy.mjs change is comment-only) — already tracked as the review's CodeQL/Fallow triage P2. format + largefiles hooks passed; oxfmt/oxlint/lint:skills run manually. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): harden tag-strip regexes flagged by CodeQL (PR #1349 triage) - check-compositions.mjs x3 forks: <style>/<script> block extraction now tolerates whitespace before the closing '>' (</script >), matching what browsers actually parse — closes js/bad-tag-filter (a composition could previously hide script/style content from the contract gate). - build-design.mjs x3 forks + pr-to-video ingest.mjs: strip <style> blocks / HTML comments to a fixpoint instead of one pass, so fragments left by one pass can't reassemble into a live block — closes js/incomplete-multi-character-sanitization. (Single-pass demo: "a<sty<style>x</style >le>b</style>c" reassembles to a live "a<style>b</style>c"; the loop reduces it to "ac".) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): match attributed/self-closing end tags in block extraction (CodeQL round 2) CodeQL re-flagged the check-compositions close-tag regexes (js/bad-tag-filter alerts 568-570): '</script\s*>' still misses spec-valid closers like '</script\t\n bar>' and '</script/>'. Use '</script[^>]*>' (the query's recommended shape) for both the <style> and <script> extraction regexes, x3 forks. Verified all four closer variants now terminate a block. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(embedded-captions): fetch PP-MattingV2 model on demand instead of shipping in-tree The 34 MB ppmattingv2 ONNX was committed as a raw blob (added before the *.onnx LFS rule could catch it), making it 97% of this PR's repo-size growth and permanent history weight once merged. Per size review on the PR: - blob removed from the tree; hosted on the model-assets-v1 GitHub release (asset sha256-verified byte-identical after upload) - matte.cjs resolves: MATTE_MODEL env -> legacy bundled copy if present -> ~/.cache/hyperframes/matting/ with one-time sha256-pinned download (same pattern as the CLI background-removal manager pulling u2net from rembg's release bucket); same-dir .part temp + atomic rename - new `matte.cjs --ensure-model` pre-warm flag; SKILL.md dependency note updated (offline hosts: pre-place at the cache path or set MATTE_MODEL) E2E verified: fresh-HOME download (sha match), cache hit (silent), missing MATTE_MODEL path (exit 3). Author-time fetch only — render path untouched. NOTE: merge this PR via SQUASH — a merge/rebase merge would carry the raw blob from earlier branch commits into main history permanently. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(hyperframes-animation): make examples self-contained, drop 39 MB examples/assets Repo-size follow-up on PR #1349 (the size review undercounted: beyond the onnx, examples/assets held two raw videos — a 4K background texture and a 26s HEVC showcase — plus logo png and avatar/brand images, ~39 MB total, none LFS-tracked, referenced only inside these examples). - assets/ deleted outright; no external path coupling (verified). - 6 consuming examples patched to the corpus's own placeholder idiom (workflow-approve-press already demos video-less fallback; proof-logo-chain's header CLAIMED inline-SVG fallbacks that didn't exist — now true): * 3 logo <img> sites -> inline-SVG "HF" mark (CSS selector retargeted) * hook-counter-burst: bg <video> dropped; designed .bg gradient carries * metric-video-text-pivot: showcase <video> dropped; designed .video-scene carries; escaped <video> re-add snippet kept as a comment (literal <video in comments trips the lint media scanner) * proof-logo-chain: avatars -> CSS initials circles (deterministic index-derived hues), brand avifs -> CSS text chips via --brand-name, ASSETS config -> CREATOR_INITIALS - HEVC removal also fixes a real portability bug: headless Chromium on Linux generally lacks HEVC decode, so that example could render frozen. - Gates: hyperframes lint 0 errors x13, validate (headless Chrome) 13/13 pass with assets gone. PR added-file weight drops ~49.5 MB -> ~10.6 MB. Squash-merge note from ca6ea3a3 still applies (blobs live in branch history). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(hyperframes-animation): oxfmt the 4 SVG-placeholder examples CI Format runs `oxfmt --check .` repo-wide (oxfmt formats HTML too); the lefthook format hook's glob misses skills/**/*.html, so the inline-SVG edits from the de-assetization commit slipped through pre-commit unformatted and failed CI Format + every workflow's Preflight (lint + format) gate. Attribute-wrap only; lint 0 errors + validate re-pass on all 4. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(cli): clear fallow audit gate (PR #1349 CI) Two parts: - validate.ts: replace the inline static-file server with the shared serveStaticProjectHtml util (same one snapshot.ts / layout.ts use). Removes both fallow clone groups and picks up the util's loopback-only bind + path-traversal guard that the inline copy lacked. - Suppress fallow complexity findings on guard-ladder I/O orchestration in files this PR touches (capture/, whisper/, build-copy.mjs, staticProjectServer.ts). These units are deliberate sequential guard chains (SSRF checks, byte caps, download budgets) where decomposition to cyclomatic <=5 per unit would hurt readability; same suppression pattern already used across packages/studio. Fallow audit now exits 0 against origin/main; CLI suite 719/719 green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(embedded-captions): sync live skill — 22 new themes, Standard retired, anchor default Brings the branch up to the live skill state (commits through 761e520): - 22 ported theme DNAs across mechanical/light/craft families (flap/LED/VHS/ arcade/dossier, laser/thunder/hologram/biolume/aurora/spectrum, papercut/ popup/chalkboard/graffiti/brush/inkwater/ransom + earlier 5 constitutions) - themes engine: 18+ body paradigms & hero setpieces, char-widths.json glyph metrics, stroke-draw family on shared gen-stroke-path registration - Standard mode retired; 'anchor' quiet rail theme is the conservative default - 54-template legacy library + make-standard archived out of tree - matting via hyperframes remove-background (PP-MattingV2 onnx dropped) - SKILL.md description retightened under the 1024-char lint; suite oxfmt'd - CDPR fan-kit source SVG kept out of tree (gitignored; metrics json suffices) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(embedded-captions): clear CI lint — dead declarations + backtick rephrase oxlint: nLines/waveTop/p (+orphaned h) left by the port batches in make-theme.cjs. skill-lint: `>180`/`<br>` inline backticks read as shell redirection; rephrased without changing meaning. Fixture regressions green (laser/anchor/ransom recompile clean). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(embedded-captions): read-with-catch for matte.fps (CodeQL js/file-system-race) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(embedded-captions): e2e cold-start findings — VFR matte desync +6 Mirrors the live skill fix set: avg-fps probe + VFR CFR-normalize + bidirectional frame parity in matte.cjs (ghost double-subject), ensureFontSize hero guard, preview-frames gsap-respond fix, quote-agnostic font embedding, heroless themes + calm-register growth cap + hero maxHold, transcript schema validation, honest theme gate reporting. Verified: 19/19 fixture regression, C1/T3/T4 re-rendered. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * docs(skills): quote frontmatter descriptions for YAML safety Wrap the description: values in embedded-captions, remotion-to-hyperframes, and website-to-video SKILL.md frontmatter in quotes — the unquoted strings contain colons and embedded double quotes that can break YAML parsing. oxfmt normalizes the two with embedded quotes to single-quoted form. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: jieling-jenson <jie.ling@heygen.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
WaterrrForever
co-authored by
Claude Opus 4.8
jieling-jenson
Claude Opus 4.8
jieling-jenson
parent
a241f2591e
commit
211e0adbe8
@@ -0,0 +1,145 @@
|
||||
# V—Take Visual Design Library
|
||||
|
||||
This directory is a **reference library** for the graphic-overlays skill. Style, layout,
|
||||
and video frame are three **orthogonal** dimensions you can freely mix when
|
||||
designing a takeaway video.
|
||||
|
||||
```
|
||||
Style × Layout × VideoFrame
|
||||
(10) (4) (3) = 120 possible combinations
|
||||
```
|
||||
|
||||
Read a reference file when you decide to use that dimension. Each file is a
|
||||
self-contained HTML fragment that follows the graphic-overlays card-HTML contract
|
||||
(scoped `<style>`, no `<script>`, no external URLs, animations only via
|
||||
`data-anim-*`).
|
||||
|
||||
## Layouts — how video and card share the canvas
|
||||
|
||||
| key | file | what it does | best for |
|
||||
| --------- | -------------------------------------------- | ------------------------------------------------------- | --------------------------------------- |
|
||||
| `split` | [layouts/split.html](layouts/split.html) | 50/50 side-by-side (landscape) or top/bottom (portrait) | speaker + data equal weight |
|
||||
| `stack` | [layouts/stack.html](layouts/stack.html) | video on top (~52%), card below | talking-head with summary card |
|
||||
| `pip` | [layouts/pip.html](layouts/pip.html) | card fills canvas, video rounded PiP in corner | content-heavy moment, speaker secondary |
|
||||
| `overlay` | [layouts/overlay.html](layouts/overlay.html) | video full-bleed, glass card floats on bottom | cinematic / dramatic moments |
|
||||
|
||||
A layout is a **two-part recipe**: pick a `card.zone` value to put in
|
||||
`storyboard.json` AND author a GSAP tween for `#video-wrap` to its
|
||||
target rect in the composition's `<script>`. Open the layout file's
|
||||
header for the recommended `zone` + the GSAP statement to paste.
|
||||
(Earlier docs referenced a `card.layout` field — that field does NOT
|
||||
exist in the real schema; the strict v3 schema only has `card.zone`.)
|
||||
|
||||
## Styles — the card's visual language
|
||||
|
||||
| key | file | character | accent | suggested font |
|
||||
| ------------ | ------------------------------------------------ | ---------------------------------------------------- | --------- | ------------------- |
|
||||
| `academic` | [styles/academic.html](styles/academic.html) | warm paper · grid · serif · blue highlight | `#2557a7` | serif |
|
||||
| `editorial` | [styles/editorial.html](styles/editorial.html) | cream · coral block · big italic quote | `#ff3a2d` | Playfair-like serif |
|
||||
| `minimal` | [styles/minimal.html](styles/minimal.html) | pure black/white · huge type · generous space | `#000` | Inter |
|
||||
| `spotlight` | [styles/spotlight.html](styles/spotlight.html) | dark purple gradient · glow · dramatic | `#a78bfa` | sans |
|
||||
| `geom` | [styles/geom.html](styles/geom.html) | chartreuse + hot pink + black collision | `#d4ff00` | Inter bold |
|
||||
| `whiteboard` | [styles/whiteboard.html](styles/whiteboard.html) | paper · Caveat handwriting · sketched borders | `#ff6b35` | Caveat |
|
||||
| `audit` | [styles/audit.html](styles/audit.html) | manila paper · justified serif · APPROVED stamp | `#8b1d1d` | serif |
|
||||
| `terminal` | [styles/terminal.html](styles/terminal.html) | dark · monospace · ASCII border · prompt cursor | `#4ade80` | mono |
|
||||
| `swiss` | [styles/swiss.html](styles/swiss.html) | white · Helvetica · strict double rules · red accent | `#e8190f` | Helvetica/Inter |
|
||||
| `xhs` | [styles/xhs.html](styles/xhs.html) | cream + hot pink · chips · #hashtags · ❤️💬 row | `#ff2e63` | sans |
|
||||
|
||||
Choose by content tone, not by content type — `academic` works for finance
|
||||
too if the tone is reflective; `terminal` works for non-tech if the tone is
|
||||
"engineering rigor".
|
||||
|
||||
## Video Frames — decoration around the video element
|
||||
|
||||
| key | file | character | when to skip |
|
||||
| ---------- | -------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------ |
|
||||
| `clean` | [frames/clean.html](frames/clean.html) | no decoration; raw video | default; safest |
|
||||
| `hairline` | [frames/hairline.html](frames/hairline.html) | double-stroke + four-corner viewfinder ticks | over `overlay` layout (clashes with full-bleed) |
|
||||
| `polaroid` | [frames/polaroid.html](frames/polaroid.html) | white photo frame + Caveat label + blue washi tape (no tilt) | over `overlay` layout; portrait PiP gets cramped |
|
||||
|
||||
A frame is a decorative div that sits **next to** the `#video-wrap` inside
|
||||
the composition's `#stage`. It is one-time HTML (not animated), but you can
|
||||
fade it in/out across cards. See each frame file for the placement snippet
|
||||
and the inline `<style>` it needs.
|
||||
|
||||
## Decision guide (loose, not prescriptive)
|
||||
|
||||
| video content | suggested combos |
|
||||
| -------------------------------- | -------------------------------------------------------- |
|
||||
| interview / dialogue | `academic` × `stack`, `audit` × `split` |
|
||||
| product launch / announcement | `editorial` × `overlay`, `geom` × `pip` |
|
||||
| data analysis / financial report | `audit` × `split`, `swiss` × `stack`, `terminal` × `pip` |
|
||||
| social clip (9:16) | `xhs` × `overlay`, `editorial` × `stack` |
|
||||
| technical tutorial | `terminal` × `split`, `whiteboard` × `pip` |
|
||||
| emotional story / narration | `spotlight` × `overlay`, `whiteboard` × `overlay` |
|
||||
| minimalist presentation | `minimal` × `split`, `swiss` × `overlay` |
|
||||
|
||||
These are starting points only. Look at the transcript, pick the tone, then
|
||||
pick the visual.
|
||||
|
||||
## Portrait sizing — bigger type for mobile
|
||||
|
||||
Every `references/styles/*.html` is sized for a **1920×1080 landscape**
|
||||
preview. When the final composition is **portrait (1080×1920)** — the
|
||||
default for social / mobile — scale every visual size up so it reads on a
|
||||
phone held close.
|
||||
|
||||
| token | landscape | **portrait** | scale |
|
||||
| --------------------- | --------- | ------------ | ----- |
|
||||
| hero title (h1/h2) | 64–96px | **88–132px** | ×1.35 |
|
||||
| detail / body | 24–30px | **30–40px** | ×1.30 |
|
||||
| kicker / chip / meta | 14–18px | **18–22px** | ×1.25 |
|
||||
| primary number / stat | 48–60px | **64–88px** | ×1.40 |
|
||||
| horizontal padding | 40–64px | **24–36px** | ÷1.5 |
|
||||
|
||||
`portraitPx ≈ round(landscapePx × 1.3)`. Hero headlines can go ×1.4;
|
||||
small meta stays at ×1.2. Padding **shrinks** in portrait since the card
|
||||
is narrower.
|
||||
|
||||
For a card that must work in both, use a container query on the card
|
||||
root: `container-type: inline-size` + `font-size: clamp(64px, 8.5cqi, 132px)`.
|
||||
|
||||
## Source aspect ratio independence
|
||||
|
||||
Output canvas is independent of source video aspect. Three supported
|
||||
output ratios (selected by the user in Step 7.0 of SKILL.md):
|
||||
|
||||
| ratio | canvas | `storyboard.layout` | best for |
|
||||
| ------ | --------- | ------------------------------------------------------ | ---------------------------------------------------------- |
|
||||
| `16:9` | 1920×1080 | `"landscape"` | YouTube / TV / desktop playback |
|
||||
| `9:16` | 1080×1920 | `"portrait"` | TikTok / Reels / short-form mobile |
|
||||
| `4:5` | 1080×1350 | `"portrait"` (schema treats 4:5 as portrait since h>w) | Instagram feed / WeChat Moments / works for both platforms |
|
||||
|
||||
The layout reference files in `layouts/` document **landscape** and
|
||||
**portrait** bounds only. For **4:5** derive bounds by proportional
|
||||
vertical scaling from portrait: `4:5 y/h = round(portrait y/h × 0.703)`,
|
||||
keep `x/w` identical. The composer doesn't care about the named layout
|
||||
value; it just uses `composition.width × height`.
|
||||
|
||||
- Landscape video on landscape canvas → `videoBounds` matches video aspect, no letterbox
|
||||
- Portrait video on landscape canvas → `videoBounds` is a narrower box (e.g. `pip` becomes 248×440); empty side filled by card or background
|
||||
- Landscape video on portrait canvas → `videoBounds` becomes a wide-but-short band; `stack` and `overlay` work best
|
||||
- Portrait video on portrait canvas → most natural; any layout
|
||||
|
||||
The layout reference files show landscape values; for portrait you usually
|
||||
flip the long axis: `split` becomes top/bottom, `pip` video bubble shrinks
|
||||
~20%, `overlay` card slot widens to full width.
|
||||
|
||||
## Constraints you must obey when copying from these references
|
||||
|
||||
1. **No `<script>`** — animations only via `data-anim-*` attributes
|
||||
2. **No external URLs** — no Google Fonts CDN, no remote images; the
|
||||
skill provides Caveat / LXGW WenKai TC / Inter / Virgil locally
|
||||
3. **All `<style>` rules must be prefixed with `.card[data-card-id="..."]`** —
|
||||
the hyperframes sanitizer auto-scopes them, but write them already-scoped to
|
||||
stay readable
|
||||
4. **No `on*=` inline handlers**
|
||||
5. **CSS variables for colors** when you want a card to switch theme cleanly;
|
||||
inline hex when you want this specific style's signature look
|
||||
|
||||
If a reference uses a font you don't have, fall back:
|
||||
|
||||
- Playfair Display / Noto Serif SC → `ui-serif, "Songti SC", "Times New Roman", serif`
|
||||
- Noto Sans SC → `ui-sans-serif, system-ui, sans-serif`
|
||||
- JetBrains Mono → `ui-monospace, "SF Mono", Menlo, monospace`
|
||||
- Kalam → `'Caveat', cursive`
|
||||
@@ -0,0 +1,92 @@
|
||||
<!--
|
||||
Frame: clean — no decoration. Raw video edge.
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
When to use
|
||||
- Default; safest.
|
||||
- Pairs with any layout and any style.
|
||||
- Required over the `overlay` layout (decorative frames clash with full-bleed video).
|
||||
|
||||
How to apply in the composition
|
||||
No extra HTML — just leave #video-wrap without the `framed` class.
|
||||
|
||||
.video-wrapper { border-radius: 0; box-shadow: none; }
|
||||
|
||||
How to apply on PiP layouts
|
||||
Even with `clean`, PiPs benefit from a 14px border-radius + soft shadow
|
||||
(see layouts/pip.html). That's a layout-level treatment, not a frame.
|
||||
|
||||
Placement
|
||||
None. This reference exists as documentation of the "no-frame" option.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>frame · clean (no decoration)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-wrap {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 140px;
|
||||
width: 1440px;
|
||||
height: 810px;
|
||||
background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.v-label {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font:
|
||||
600 16px/1 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.note {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
bottom: 60px;
|
||||
right: 240px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font:
|
||||
14px/1.4 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="video-wrap">
|
||||
<span class="v-label">VIDEO · no chrome</span>
|
||||
</div>
|
||||
<div class="note">CLEAN — let the video speak for itself.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!--
|
||||
Frame: hairline — double stroke + four-corner viewfinder ticks
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
When to use
|
||||
- Professional / cinematographic feel without going full polaroid.
|
||||
- Pairs well with: split, stack, pip layouts.
|
||||
- Pairs well with: academic, audit, swiss, terminal styles.
|
||||
- Skip on overlay layout — the decorative chrome clashes with full-bleed video.
|
||||
|
||||
How to apply in the composition
|
||||
Add ONE decorative div as a sibling of #video-wrap (not a child — the
|
||||
video element is muted/playsinline and the decorative div should sit
|
||||
above it). The accent color is configurable per scene.
|
||||
|
||||
<div class="video-wrapper" id="video-wrap">
|
||||
<video src="input-video.mp4" ...></video>
|
||||
</div>
|
||||
<div class="frame-deco frame-deco--hairline"
|
||||
style="left:240px; top:140px; width:1440px; height:810px;
|
||||
--frame-accent: #2557a7;">
|
||||
<span class="tick tl"></span>
|
||||
<span class="tick tr"></span>
|
||||
<span class="tick bl"></span>
|
||||
<span class="tick br"></span>
|
||||
</div>
|
||||
|
||||
CSS (4 corners via explicit spans — preferred over ::before/::after
|
||||
because pseudo-elements give you at most 2 corners cleanly):
|
||||
|
||||
.frame-deco { position: absolute; pointer-events: none; z-index: 3; }
|
||||
.frame-deco--hairline {
|
||||
box-shadow:
|
||||
inset 0 0 0 2px var(--frame-accent),
|
||||
inset 0 0 0 6px color-mix(in srgb, var(--frame-accent) 13%, transparent),
|
||||
0 0 0 1px rgba(0,0,0,.1);
|
||||
}
|
||||
.frame-deco .tick { position: absolute; width: 24px; height: 24px; }
|
||||
.frame-deco .tick.tl { top: -3px; left: -3px; border-top: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
|
||||
.frame-deco .tick.tr { top: -3px; right: -3px; border-top: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
|
||||
.frame-deco .tick.bl { bottom: -3px; left: -3px; border-bottom: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
|
||||
.frame-deco .tick.br { bottom: -3px; right: -3px; border-bottom: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
|
||||
|
||||
When the layout changes mid-composition
|
||||
Move + resize the frame-deco div together with #video-wrap using GSAP:
|
||||
tl.to('#video-wrap, .frame-deco', { left:, top:, width:, height:, ... }, T);
|
||||
Or fade out the deco entirely before transitioning to a clean PiP.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>frame · hairline (double stroke + viewfinder ticks)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-wrap {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 140px;
|
||||
width: 1440px;
|
||||
height: 810px;
|
||||
background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.v-label {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font:
|
||||
600 16px/1 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.frame-deco {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 140px;
|
||||
width: 1440px;
|
||||
height: 810px;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
--frame-accent: #2557a7;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px var(--frame-accent),
|
||||
inset 0 0 0 6px rgba(37, 87, 167, 0.13),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.tick {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.tick.tl {
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
border-top: 4px solid var(--frame-accent, #2557a7);
|
||||
border-left: 4px solid var(--frame-accent, #2557a7);
|
||||
}
|
||||
.tick.tr {
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
border-top: 4px solid var(--frame-accent, #2557a7);
|
||||
border-right: 4px solid var(--frame-accent, #2557a7);
|
||||
}
|
||||
.tick.bl {
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
border-bottom: 4px solid var(--frame-accent, #2557a7);
|
||||
border-left: 4px solid var(--frame-accent, #2557a7);
|
||||
}
|
||||
.tick.br {
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
border-bottom: 4px solid var(--frame-accent, #2557a7);
|
||||
border-right: 4px solid var(--frame-accent, #2557a7);
|
||||
}
|
||||
.note {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
bottom: 60px;
|
||||
right: 240px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font:
|
||||
14px/1.4 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="video-wrap">
|
||||
<span class="v-label">VIDEO</span>
|
||||
</div>
|
||||
<div class="frame-deco">
|
||||
<span class="tick tl"></span>
|
||||
<span class="tick tr"></span>
|
||||
<span class="tick bl"></span>
|
||||
<span class="tick br"></span>
|
||||
</div>
|
||||
<div class="note">
|
||||
HAIRLINE — double stroke (2px inner + soft 6px halo) + four-corner viewfinder ticks. Accent
|
||||
color matches the card style.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--
|
||||
Frame: polaroid — white photo frame + Caveat label + blue washi tape (no tilt)
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
When to use
|
||||
- Casual, personal, warm feel. Looks great for interviews, memoirs, vlogs.
|
||||
- Pairs well with: split, stack, pip layouts.
|
||||
- Pairs well with: academic, whiteboard, editorial, xhs styles.
|
||||
- Skip on overlay layout (clashes with full-bleed).
|
||||
- In portrait PiP (narrow video bubble), polaroid gets cramped — prefer hairline.
|
||||
|
||||
IMPORTANT — NO TILT
|
||||
Earlier iterations of the design tilted the polaroid by -1.4° / 5°. User
|
||||
explicitly removed the tilt (chat L770–790). Keep the polaroid card,
|
||||
label, and washi tape all UPRIGHT.
|
||||
|
||||
How to apply in the composition
|
||||
Replace the bare #video-wrap with a wrapper div that draws the polaroid
|
||||
around it. The polaroid card has its own background + padding; the video
|
||||
sits inside a sub-region.
|
||||
|
||||
HTML pattern (use absolute positioning to fit the layout's video bounds):
|
||||
<div class="frame-deco frame-deco--polaroid"
|
||||
style="left:240px; top:140px; width:1440px; height:990px;">
|
||||
<div class="polaroid-card">
|
||||
<div class="polaroid-photo">
|
||||
<!-- the actual #video-wrap element, sized to fill -->
|
||||
<div class="video-wrapper" id="video-wrap">
|
||||
<video src="input-video.mp4" ...></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="polaroid-caption">speaker · 2026</div>
|
||||
</div>
|
||||
<div class="washi"></div>
|
||||
</div>
|
||||
|
||||
The video bounds in storyboard.json should be the OUTER polaroid bounds.
|
||||
The CSS inset values below carve out the inner photo area.
|
||||
|
||||
Suggested CSS
|
||||
.frame-deco--polaroid { position: absolute; }
|
||||
.polaroid-card {
|
||||
position: absolute; inset: 24px;
|
||||
background: #fefefe; padding: 14px 14px 64px;
|
||||
box-shadow: 0 28px 60px -18px rgba(0,0,0,.55),
|
||||
0 4px 12px rgba(0,0,0,.12);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.polaroid-photo {
|
||||
position: relative; width: 100%; height: calc(100% - 50px);
|
||||
overflow: hidden; background: #000;
|
||||
}
|
||||
.polaroid-photo .video-wrapper {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
|
||||
}
|
||||
.polaroid-caption {
|
||||
position: absolute; bottom: 18px; left: 0; right: 0;
|
||||
text-align: center;
|
||||
font: 700 32px/1 "Caveat", ui-serif, cursive;
|
||||
color: #1d1c1a;
|
||||
}
|
||||
.washi {
|
||||
position: absolute; top: 12px; left: 20%;
|
||||
width: 120px; height: 28px;
|
||||
background: rgba(180,210,235,.85);
|
||||
background-image: repeating-linear-gradient(90deg,
|
||||
transparent 0 6px, rgba(255,255,255,.3) 6px 7px);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,.15);
|
||||
}
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>frame · polaroid (white photo frame + caveat label, no tilt)</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #0a0c12; color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif; }
|
||||
.stage { position: relative; width: 1920px; height: 1080px;
|
||||
transform-origin: top left; transform: scale(0.5);
|
||||
background: #0a0c12; overflow: hidden; }
|
||||
.frame-deco { position: absolute; left: 240px; top: 70px; width: 1440px; height: 940px; }
|
||||
.polaroid-card {
|
||||
position: absolute; inset: 24px;
|
||||
background: #fefefe; padding: 14px 14px 64px;
|
||||
box-shadow: 0 28px 60px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.12);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.polaroid-photo {
|
||||
position: relative; width: 100%; height: calc(100% - 50px);
|
||||
overflow: hidden; background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(45deg,
|
||||
transparent 0 12px, rgba(255,255,255,.05) 12px 13px);
|
||||
}
|
||||
.v-label { position: absolute; left: 24px; top: 24px;
|
||||
padding: 8px 14px; border: 1px solid rgba(255,255,255,.45);
|
||||
border-radius: 3px; color: rgba(255,255,255,.7);
|
||||
font: 600 16px/1 ui-monospace, monospace; letter-spacing: .14em; }
|
||||
.polaroid-caption {
|
||||
position: absolute; bottom: 18px; left: 0; right: 0;
|
||||
text-align: center;
|
||||
font: 700 32px/1 "Caveat", ui-serif, cursive;
|
||||
color: #1d1c1a;
|
||||
}
|
||||
.washi {
|
||||
position: absolute; top: 12px; left: 20%;
|
||||
width: 120px; height: 28px;
|
||||
background: rgba(180,210,235,.85);
|
||||
background-image: repeating-linear-gradient(90deg,
|
||||
transparent 0 6px, rgba(255,255,255,.3) 6px 7px);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,.15);
|
||||
}
|
||||
.note { position: absolute; left: 240px; bottom: 18px; right: 240px;
|
||||
text-align: center; color: rgba(255,255,255,.5);
|
||||
font: 14px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="frame-deco">
|
||||
<div class="polaroid-card">
|
||||
<div class="polaroid-photo">
|
||||
<span class="v-label">VIDEO</span>
|
||||
</div>
|
||||
<div class="polaroid-caption">speaker · 2026</div>
|
||||
</div>
|
||||
<div class="washi"></div>
|
||||
</div>
|
||||
<div class="note">POLAROID — white frame, Caveat handwritten caption, blue washi tape on top. Upright (no tilt).</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,164 @@
|
||||
<!--
|
||||
Layout: overlay — video full-bleed, glass card floats on bottom
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Implementation: card.zone = "video-overlay" + leave #video-wrap at
|
||||
full-bleed (no tween needed if it starts full-bleed). The "card" is
|
||||
positioned by CSS inside the video-overlay zone's full-canvas wrapper.
|
||||
|
||||
Recommended storyboard.json card entry (strict v3):
|
||||
{
|
||||
"id": "card-XX",
|
||||
"intent": "cinematic / dramatic moment with glass overlay",
|
||||
"startSec": 8, "endSec": 14,
|
||||
"accentIndex": 0,
|
||||
"zone": "video-overlay",
|
||||
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
||||
}
|
||||
|
||||
GSAP target for #video-wrap (full-bleed — usually unchanged):
|
||||
tl.to('#video-wrap',
|
||||
{ left: 0, top: 0, width: COMPOSITION_W, height: COMPOSITION_H,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
// Use defaults: landscape 1920×1080 / portrait 1080×1920 / 4:5 1080×1350
|
||||
|
||||
Recommended card-host inline style (since zone="video-overlay" gives
|
||||
full-canvas bounds, you typically inset the actual card visual via CSS):
|
||||
|
||||
landscape glass card, mid-left:
|
||||
.card[data-card-id="X"] .root {
|
||||
position: absolute; left: 48px; top: 460px;
|
||||
width: 660px; height: 540px;
|
||||
background: rgba(15,16,22,.78);
|
||||
backdrop-filter: blur(22px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(140%);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
|
||||
}
|
||||
|
||||
portrait glass card, bottom band:
|
||||
.card[data-card-id="X"] .root {
|
||||
position: absolute; left: 24px; top: 1280px;
|
||||
width: 1032px; height: 564px;
|
||||
/* same glass treatment */
|
||||
}
|
||||
|
||||
4:5 glass card (y/h × 0.703):
|
||||
.card[data-card-id="X"] .root {
|
||||
position: absolute; left: 24px; top: 900px;
|
||||
width: 1032px; height: 397px;
|
||||
/* same glass treatment */
|
||||
}
|
||||
|
||||
Legibility gradient (insert as a third absolute layer between video
|
||||
and card-host, in the composition's <div id="stage">):
|
||||
|
||||
<div class="legibility"></div>
|
||||
|
||||
.legibility {
|
||||
position: absolute; inset: 0; pointer-events: none; z-index: 2;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%,
|
||||
transparent 50%, rgba(0,0,0,.72) 100%);
|
||||
}
|
||||
|
||||
Notes
|
||||
- Card root MUST be transparent or use rgba/glass background — see
|
||||
Pattern A in SKILL.md "Transparent card backgrounds".
|
||||
- Glass without legibility gradient = white-on-white catastrophe over
|
||||
bright video. Always pair them.
|
||||
- Glass on a light video also benefits from a darker base color (use
|
||||
rgba(15,16,22,.78) over rgba(255,255,255,.10) when source has bright
|
||||
daylight / interior shots).
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>layout · overlay (video full-bleed, glass card)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-region {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, transparent 35%),
|
||||
linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
|
||||
}
|
||||
.card-region {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
top: 460px;
|
||||
width: 660px;
|
||||
height: 540px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font:
|
||||
600 24px/1.3 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.label {
|
||||
padding: 12px 18px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-label {
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 28px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
padding: 8px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
font:
|
||||
600 16px/1 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="video-region"><span class="v-label">VIDEO · 1920×1080 (full-bleed)</span></div>
|
||||
<div class="gradient"></div>
|
||||
<div class="card-region"><span class="label">CARD · 660×540 glass</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
Layout: pip — card fills canvas, video rounded PiP in corner
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Implementation: card.zone = "fullscreen" + shrink #video-wrap to a
|
||||
corner pill via GSAP, and add a .pip-pill CSS class for the chrome.
|
||||
|
||||
Recommended storyboard.json card entry (strict v3):
|
||||
{
|
||||
"id": "card-XX",
|
||||
"intent": "content-heavy moment with speaker as small accent",
|
||||
"startSec": 8, "endSec": 14,
|
||||
"accentIndex": 0,
|
||||
"zone": "fullscreen",
|
||||
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
||||
}
|
||||
|
||||
GSAP target for #video-wrap (corner pill — pick one per source aspect):
|
||||
|
||||
landscape (1920×1080), 16:9 source video:
|
||||
tl.set('#video-wrap', { className: 'video-wrapper pip-pill' }, START_SEC);
|
||||
tl.to('#video-wrap',
|
||||
{ left: 1432, top: 28, width: 460, height: 258,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
landscape, 9:16 source video (vertical phone footage):
|
||||
tl.to('#video-wrap',
|
||||
{ left: 1644, top: 28, width: 248, height: 440, ... }, START_SEC);
|
||||
|
||||
portrait (1080×1920), 16:9 source video:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 690, top: 28, width: 360, height: 203, ... }, START_SEC);
|
||||
|
||||
portrait, 9:16 source video:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 738, top: 28, width: 312, height: 555, ... }, START_SEC);
|
||||
|
||||
4:5 (1080×1350) — y values × 0.703, w/h × 0.703:
|
||||
landscape-source: { left: 690, top: 28, width: 360, height: 203 } → keep, fits
|
||||
portrait-source : { left: 738, top: 28, width: 312, height: 390 }
|
||||
|
||||
Recommended .pip-pill CSS (add to composition <style>):
|
||||
.video-wrapper.pip-pill {
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 24px 60px -20px rgba(0,0,0,.45),
|
||||
0 0 0 4px rgba(255,255,255,.7),
|
||||
0 0 0 5px rgba(0,0,0,.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Notes
|
||||
- Card-first composition for content-heavy talks.
|
||||
- Default corner is top-right (above); for bottom-right flip y to
|
||||
canvasH - videoH - 28 (e.g. portrait 16:9 source bottom-right:
|
||||
{ left: 690, top: 1689, width: 360, height: 203 }).
|
||||
- DOM order: card-host appears BEFORE video-wrapper for the pip window
|
||||
so the video pill paints on top of the card. If you keep them in
|
||||
natural DOM order (video first, card second), use z-index on the
|
||||
card-host to push it behind.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>layout · pip (card hero + video pill)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.region {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font:
|
||||
600 24px/1.3 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.card-region {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #f1ead8;
|
||||
color: #1a1d2b;
|
||||
}
|
||||
.video-region {
|
||||
left: 1432px;
|
||||
top: 28px;
|
||||
width: 460px;
|
||||
height: 258px;
|
||||
background: #1a1f2e;
|
||||
color: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 24px 60px -20px rgba(0, 0, 0, 0.45),
|
||||
0 0 0 4px rgba(255, 255, 255, 0.7),
|
||||
0 0 0 5px rgba(0, 0, 0, 0.18);
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.label {
|
||||
padding: 12px 18px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-label {
|
||||
font:
|
||||
600 14px/1 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="region card-region"><span class="label">CARD · 1920×1080 (full-bleed)</span></div>
|
||||
<div class="region video-region"><span class="v-label">VIDEO · 460×258 PIP</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!--
|
||||
Layout: split — 50/50 side-by-side
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Real schema only has `card.zone` (5 enum values) — there is NO
|
||||
`card.layout` field, and video bounds are composition-level
|
||||
(`videoTrack.bounds`, one-time). The "split look" is implemented by:
|
||||
1. setting card.zone = "side-panel" for each card in this stretch
|
||||
2. tweening #video-wrap to the other half via GSAP between cards
|
||||
|
||||
Recommended storyboard.json card entry (strict v3):
|
||||
{
|
||||
"id": "card-XX",
|
||||
"intent": "speaker + data side-by-side",
|
||||
"startSec": 8, "endSec": 14,
|
||||
"accentIndex": 0,
|
||||
"zone": "side-panel",
|
||||
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
||||
}
|
||||
|
||||
GSAP target for #video-wrap during this card (paste in <script>):
|
||||
landscape (1920×1080):
|
||||
tl.to('#video-wrap',
|
||||
{ left: 960, top: 0, width: 960, height: 1080,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
portrait (1080×1920) — flips to top/bottom:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 0, top: 960, width: 1080, height: 960,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
4:5 (1080×1350) — derive by ×0.703 on y/h:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 0, top: 675, width: 1080, height: 675,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
Notes
|
||||
- Card-host (from card.zone="side-panel") covers half the canvas;
|
||||
opaque card background is fine — it only paints its own half.
|
||||
- Flip card/video sides: swap which side gets the speaker tween.
|
||||
- With 14–18px page-level gap, set composition bg to deep color
|
||||
(e.g. #0a0c12) so the gap reads as a clean separator.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>layout · split (50/50)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.region {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font:
|
||||
600 24px/1.3 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.card-region {
|
||||
left: 18px;
|
||||
top: 18px;
|
||||
width: 942px;
|
||||
height: 1044px;
|
||||
background: #f1ead8;
|
||||
color: #1a1d2b;
|
||||
}
|
||||
.video-region {
|
||||
left: 978px;
|
||||
top: 18px;
|
||||
width: 924px;
|
||||
height: 1044px;
|
||||
background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.label {
|
||||
padding: 12px 18px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.meta {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: -36px;
|
||||
font:
|
||||
12px/1 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.18em;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="meta">SPLIT · 1920×1080 · card 960 | video 960</div>
|
||||
<div class="region card-region"><span class="label">CARD · 960×1080</span></div>
|
||||
<div class="region video-region"><span class="label">VIDEO · 960×1080</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!--
|
||||
Layout: stack — video on top, card below
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Implementation: card.zone = "lower-third" + tween #video-wrap to top band.
|
||||
|
||||
Recommended storyboard.json card entry (strict v3):
|
||||
{
|
||||
"id": "card-XX",
|
||||
"intent": "talking-head + caption-style summary below",
|
||||
"startSec": 8, "endSec": 14,
|
||||
"accentIndex": 0,
|
||||
"zone": "lower-third",
|
||||
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
||||
}
|
||||
|
||||
GSAP target for #video-wrap (top band):
|
||||
landscape (1920×1080) — video top 52%:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 14, top: 14, width: 1892, height: 548,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
portrait (1080×1920) — video top 44%:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 0, top: 0, width: 1080, height: 844,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
4:5 (1080×1350) — y/h × 0.703:
|
||||
tl.to('#video-wrap',
|
||||
{ left: 0, top: 0, width: 1080, height: 593,
|
||||
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
||||
|
||||
Notes
|
||||
- Sleek vertical: gives the speaker a wider stage on top.
|
||||
- Card below is a full-width statement — great for one big sentence
|
||||
or one big number.
|
||||
- The `lower-third` zone resolves to bottom 30% by default
|
||||
(`resolveZoneBounds`); for a 48% card adjust the GSAP tween to also
|
||||
move card-host height, or use `zone="whiteboard-area"` + custom CSS.
|
||||
- 14px gap between video and card looks clean — set composition bg to
|
||||
a deep color (#0a0c12) so the gap reads as a separator.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>layout · stack (video top, card bottom)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
color: #fff;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
background: #0a0c12;
|
||||
overflow: hidden;
|
||||
}
|
||||
.region {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font:
|
||||
600 24px/1.3 ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.video-region {
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
width: 1892px;
|
||||
height: 548px;
|
||||
background: #1a1f2e;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0 12px,
|
||||
rgba(255, 255, 255, 0.05) 12px 13px
|
||||
);
|
||||
}
|
||||
.card-region {
|
||||
left: 14px;
|
||||
top: 576px;
|
||||
width: 1892px;
|
||||
height: 504px;
|
||||
background: #f1ead8;
|
||||
color: #1a1d2b;
|
||||
}
|
||||
.label {
|
||||
padding: 12px 18px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="region video-region"><span class="label">VIDEO · 1920×562 (top 52%)</span></div>
|
||||
<div class="region card-region"><span class="label">CARD · 1920×518 (bottom 48%)</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!--
|
||||
Style: academic — warm paper · serif · blue highlight · coral annotation
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #f1ead8 (warm paper)
|
||||
ink #1a1d2b
|
||||
muted #5b5749
|
||||
accent #2557a7 (blue, used for kicker chip + text highlight)
|
||||
accent2#c14d2c (coral, used for dashed quote box)
|
||||
Fonts
|
||||
headline & body — serif. Falls back to "ui-serif, 'Songti SC', serif"
|
||||
mono — "ui-monospace, monospace"
|
||||
Best with
|
||||
layouts: split, stack, pip
|
||||
frames: clean, hairline
|
||||
content: 访谈反思 / 学术总结 / 长视频拆解
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · academic</title>
|
||||
<style>
|
||||
/* preview wrapper — NOT part of the card fragment */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-academic">
|
||||
<style>
|
||||
.card[data-card-id="ref-academic"] .root {
|
||||
--bg: #f1ead8;
|
||||
--ink: #1a1d2b;
|
||||
--muted: #5b5749;
|
||||
--accent: #2557a7;
|
||||
--accent2: #c14d2c;
|
||||
--font-head: ui-serif, "Songti SC", "Times New Roman", serif;
|
||||
--font-body: ui-serif, "Songti SC", "Times New Roman", serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
linear-gradient(rgba(91, 87, 73, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(91, 87, 73, 0.2) 1px, transparent 1px),
|
||||
radial-gradient(120% 80% at 50% 0%, #fff8e9 0%, transparent 60%);
|
||||
background-size:
|
||||
28px 28px,
|
||||
28px 28px,
|
||||
100% 100%;
|
||||
padding: 32px 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .kicker {
|
||||
padding: 7px 14px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font: 700 16px/1 var(--font-mono);
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .time {
|
||||
font: 15px/1 var(--font-mono);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .title {
|
||||
margin: 0;
|
||||
font: 700 92px/1.05 var(--font-head);
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
display: inline;
|
||||
background: linear-gradient(
|
||||
transparent 62%,
|
||||
rgba(37, 87, 167, 0.2) 62%,
|
||||
rgba(37, 87, 167, 0.2) 92%,
|
||||
transparent 92%
|
||||
);
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .detail {
|
||||
margin: 0;
|
||||
font: 30px/1.5 var(--font-body);
|
||||
color: var(--muted);
|
||||
max-width: 94%;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .hl {
|
||||
background: linear-gradient(transparent 60%, rgba(37, 87, 167, 0.25) 60%);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.card[data-card-id="ref-academic"] .quote {
|
||||
align-self: flex-start;
|
||||
padding: 10px 18px;
|
||||
border: 1.5px dashed var(--accent2);
|
||||
color: var(--accent2);
|
||||
font: italic 600 24px/1 var(--font-head);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div class="meta">
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
|
||||
>TAKEAWAY</span
|
||||
>
|
||||
<span class="time">00:18 → 00:46</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
class="title"
|
||||
data-anim="kinetic-chars"
|
||||
data-anim-at="0.25"
|
||||
data-anim-duration="0.55"
|
||||
data-anim-stagger="0.04"
|
||||
data-anim-pattern="pop"
|
||||
>
|
||||
<span class="char">少</span><span class="char">即</span><span class="char">是</span>
|
||||
<span class="char">多</span>
|
||||
</h2>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
|
||||
复杂的解释往往是<span class="hl">未经压缩的思考</span
|
||||
>。当你能用最少的词说清最重要的点时， 你也就真正想明白了这件事。
|
||||
</p>
|
||||
|
||||
<div class="quote" data-anim="scale-pop" data-anim-at="1.05" data-anim-duration="0.5">
|
||||
"Compression is comprehension."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
Style: audit — manila paper · justified serif · APPROVED stamp · brick + navy
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #ebd9b4 (manila)
|
||||
ink #1d1a14
|
||||
muted #6b5e44
|
||||
accent #8b1d1d (brick red — stamp + heading underline)
|
||||
accent2#1c3a6b (navy — footnote markers)
|
||||
Fonts
|
||||
headline — serif; ui-serif, "Songti SC", "Times New Roman", serif
|
||||
body — serif justified
|
||||
Best with
|
||||
layouts: split, stack
|
||||
frames: hairline, clean
|
||||
content: 财报分析 / 调查报告 / 数据稽核 / 严肃陈述
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · audit</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-audit">
|
||||
<style>
|
||||
.card[data-card-id="ref-audit"] .root {
|
||||
--bg: #ebd9b4;
|
||||
--ink: #1d1a14;
|
||||
--muted: #6b5e44;
|
||||
--accent: #8b1d1d;
|
||||
--accent2: #1c3a6b;
|
||||
--font-head: ui-serif, "Songti SC", "Times New Roman", serif;
|
||||
--font-body: ui-serif, "Songti SC", "Times New Roman", serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 28px),
|
||||
radial-gradient(120% 80% at 20% 0%, rgba(255, 250, 235, 0.45) 0%, transparent 60%);
|
||||
padding: 48px 64px 56px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .kicker {
|
||||
font: 700 14px/1 var(--font-mono);
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .ref {
|
||||
font: 13px/1 var(--font-mono);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .title {
|
||||
margin: 0;
|
||||
font: 700 76px/1.1 var(--font-head);
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .title .accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .body {
|
||||
margin: 0;
|
||||
font: 26px/1.55 var(--font-body);
|
||||
color: var(--ink);
|
||||
text-align: justify;
|
||||
column-count: 2;
|
||||
column-gap: 32px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .body .sup {
|
||||
color: var(--accent2);
|
||||
font-weight: 700;
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .foot {
|
||||
border-top: 1px solid var(--muted);
|
||||
padding-top: 10px;
|
||||
font: italic 14px/1.4 var(--font-body);
|
||||
color: var(--muted);
|
||||
}
|
||||
.card[data-card-id="ref-audit"] .stamp {
|
||||
position: absolute;
|
||||
right: 56px;
|
||||
top: 120px;
|
||||
padding: 12px 22px;
|
||||
border: 4px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font: 800 36px/1 var(--font-head);
|
||||
letter-spacing: 0.14em;
|
||||
transform: rotate(-12deg);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 0 1px var(--accent) inset;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div class="head">
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.35"
|
||||
>EXHIBIT · TAKEAWAY</span
|
||||
>
|
||||
<span class="ref">REF / VT-2026-014</span>
|
||||
</div>
|
||||
|
||||
<span class="stamp" data-anim="scale-pop" data-anim-at="0.7" data-anim-duration="0.4"
|
||||
>APPROVED</span
|
||||
>
|
||||
|
||||
<h2 class="title" data-anim="fade-in" data-anim-at="0.25" data-anim-duration="0.5">
|
||||
第三季度<span class="accent">现金流</span>由负转正
|
||||
</h2>
|
||||
|
||||
<p class="body" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.5">
|
||||
经营性现金流首次为正<span class="sup">①</span>，主要由订阅业务驱动。 自由现金流由 -2.1
|
||||
亿改善至 +0.8 亿，按当前轨迹推算<span class="sup">②</span>，全年有望实现正向 1.5–2.0
|
||||
亿。 与此同时，应收账款周转天数从 64 天压缩至 51 天，回款效率创近两年新高。
|
||||
</p>
|
||||
|
||||
<div class="foot" data-anim="fade-in" data-anim-at="0.95" data-anim-duration="0.4">
|
||||
① 含一次性税务返还 0.3 亿；② 假设 Q4 续约率不低于 91%。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,189 @@
|
||||
<!--
|
||||
Style: editorial — cream · coral block · big italic quote · Playfair-like serif
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #f1e8d5 (cream)
|
||||
ink #0e1018
|
||||
muted #6b6353
|
||||
accent #ff3a2d (coral red — used as block accents + italic quote color)
|
||||
accent2 #1f6bff (blue — used for ring/circle outline)
|
||||
accent3 #f2cf3a (yellow dot)
|
||||
Fonts
|
||||
headline — Playfair Display fallback: ui-serif, "Songti SC", serif
|
||||
body — ui-serif, serif
|
||||
Best with
|
||||
layouts: overlay, pip, stack
|
||||
frames: clean, polaroid
|
||||
content: 产品发布 / 编辑专栏 / 大字宣言
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · editorial</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-editorial">
|
||||
<style>
|
||||
.card[data-card-id="ref-editorial"] .root {
|
||||
--bg: #f1e8d5;
|
||||
--ink: #0e1018;
|
||||
--muted: #6b6353;
|
||||
--accent: #ff3a2d;
|
||||
--accent2: #1f6bff;
|
||||
--accent3: #f2cf3a;
|
||||
/* IMPORTANT — this skill only ships Caveat / LXGW WenKai TC / Inter / Virgil.
|
||||
Playfair Display is NOT bundled; if you list it first the font resolver
|
||||
can't load it and you'll get inconsistent rendering across machines.
|
||||
The editorial look uses italic-bold serif at large size — ui-serif on
|
||||
macOS resolves to Times/New York which is close enough; for a real
|
||||
Playfair you'd need to add the woff2 to public/fonts/. */
|
||||
--font-head: ui-serif, "Songti SC", "Times New Roman", serif;
|
||||
--font-body: ui-serif, "Songti SC", serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
padding: 56px 64px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .kicker {
|
||||
align-self: flex-start;
|
||||
padding: 8px 16px;
|
||||
background: var(--ink);
|
||||
color: var(--bg);
|
||||
font: 700 16px/1 var(--font-mono);
|
||||
letter-spacing: 0.22em;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .title {
|
||||
margin: 0;
|
||||
font: italic 800 132px/0.95 var(--font-head);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
max-width: 92%;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .first {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .quote-mark {
|
||||
font: 800 220px/0.5 var(--font-head);
|
||||
color: var(--accent);
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 64px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .detail {
|
||||
margin: 0;
|
||||
font: 28px/1.5 var(--font-body);
|
||||
color: var(--muted);
|
||||
max-width: 78%;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .hl {
|
||||
background: linear-gradient(transparent 62%, rgba(255, 58, 45, 0.22) 62%);
|
||||
color: var(--ink);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .accents {
|
||||
position: absolute;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .block-coral {
|
||||
top: 64px;
|
||||
right: 88px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
background: var(--accent);
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .dot-yellow {
|
||||
top: 200px;
|
||||
right: 60px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--accent3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.card[data-card-id="ref-editorial"] .ring-blue {
|
||||
bottom: 80px;
|
||||
right: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid var(--accent2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<span
|
||||
class="accents block-coral"
|
||||
data-anim="scale-pop"
|
||||
data-anim-at="0.15"
|
||||
data-anim-duration="0.5"
|
||||
></span>
|
||||
<span
|
||||
class="accents dot-yellow"
|
||||
data-anim="fade-in"
|
||||
data-anim-at="0.35"
|
||||
data-anim-duration="0.4"
|
||||
></span>
|
||||
<span
|
||||
class="accents ring-blue"
|
||||
data-anim="fade-in"
|
||||
data-anim-at="0.55"
|
||||
data-anim-duration="0.4"
|
||||
></span>
|
||||
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
|
||||
>TAKEAWAY</span
|
||||
>
|
||||
|
||||
<h1 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.6">
|
||||
<span class="first">真</span>正的创造，从拒绝套路开始。
|
||||
</h1>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="0.8" data-anim-duration="0.45">
|
||||
停止模仿、停止套模板，把每一个想法都当作<span class="hl">第一次表达</span>。
|
||||
只有这样，作品才会带上你的体温。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
Style: geom — chartreuse + hot pink + black collision · bold Helvetica
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #0a0a0a (deep black for contrast)
|
||||
ink #ffffff
|
||||
muted #aaaaaa
|
||||
accent #d4ff00 (chartreuse — primary slab)
|
||||
accent2#ff2e88 (hot pink — secondary slab + dot)
|
||||
accent3#ffffff (white — line work)
|
||||
Fonts
|
||||
headline — Inter Black / ui-sans-serif with very wide weight
|
||||
body — Inter
|
||||
Best with
|
||||
layouts: pip, overlay, stack
|
||||
frames: clean, hairline
|
||||
content: 产品发布 / 大胆宣言 / 撞色封面 / 短视频高光
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · geom</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-geom">
|
||||
<style>
|
||||
.card[data-card-id="ref-geom"] .root {
|
||||
--bg: #0a0a0a;
|
||||
--ink: #ffffff;
|
||||
--muted: #aaaaaa;
|
||||
--accent: #d4ff00;
|
||||
--accent2: #ff2e88;
|
||||
--accent3: #ffffff;
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .slab-1 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 540px;
|
||||
height: 200px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .slab-2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background: var(--accent2);
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .stripe {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 760px;
|
||||
height: 4px;
|
||||
width: 600px;
|
||||
background: var(--accent3);
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .content {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
top: 240px;
|
||||
right: 480px;
|
||||
bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 28px;
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .kicker {
|
||||
align-self: flex-start;
|
||||
padding: 8px 14px;
|
||||
background: var(--ink);
|
||||
color: var(--bg);
|
||||
font: 800 18px/1 var(--font-mono);
|
||||
letter-spacing: 0.24em;
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .title {
|
||||
margin: 0;
|
||||
font: 900 156px/0.92 var(--font-sans);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .stroke {
|
||||
-webkit-text-stroke: 3px var(--accent);
|
||||
color: transparent;
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .detail {
|
||||
margin: 0;
|
||||
font: 600 26px/1.4 var(--font-sans);
|
||||
color: var(--muted);
|
||||
max-width: 88%;
|
||||
}
|
||||
.card[data-card-id="ref-geom"] .detail .pink {
|
||||
color: var(--accent2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<span
|
||||
class="slab-1"
|
||||
data-anim="slide-in"
|
||||
data-anim-at="0.1"
|
||||
data-anim-duration="0.45"
|
||||
data-anim-from="left"
|
||||
data-anim-distance="540"
|
||||
></span>
|
||||
<span
|
||||
class="slab-2"
|
||||
data-anim="slide-in"
|
||||
data-anim-at="0.25"
|
||||
data-anim-duration="0.45"
|
||||
data-anim-from="right"
|
||||
data-anim-distance="360"
|
||||
></span>
|
||||
<span
|
||||
class="stripe"
|
||||
data-anim="grow-x"
|
||||
data-anim-at="0.5"
|
||||
data-anim-duration="0.5"
|
||||
data-anim-target-w="600"
|
||||
></span>
|
||||
|
||||
<div class="content">
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
|
||||
>TAKEAWAY</span
|
||||
>
|
||||
|
||||
<h1 class="title" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.5">
|
||||
<span class="stroke">BIG</span><br />IDEA.
|
||||
</h1>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="0.95" data-anim-duration="0.4">
|
||||
别再做温和的中间方案。要么<span class="pink">最大胆</span>，要么不做。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
Style: minimal — pure black on white · huge type · generous space
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #ffffff
|
||||
ink #000000
|
||||
muted #6b7280
|
||||
accent #000000 (no color; weight & size do the work)
|
||||
Fonts
|
||||
headline & body — Inter, ui-sans-serif, system-ui, sans-serif
|
||||
Best with
|
||||
layouts: split, stack, overlay
|
||||
frames: clean, hairline
|
||||
content: 极简陈述 / 数据揭示 / 大字标题
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · minimal</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-minimal">
|
||||
<style>
|
||||
.card[data-card-id="ref-minimal"] .root {
|
||||
--bg: #ffffff;
|
||||
--ink: #000000;
|
||||
--muted: #6b7280;
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
padding: 80px 96px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 56px;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.card[data-card-id="ref-minimal"] .kicker {
|
||||
font: 600 14px/1 var(--font-sans);
|
||||
letter-spacing: 0.32em;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card[data-card-id="ref-minimal"] .title {
|
||||
margin: 0;
|
||||
font: 900 132px/0.95 var(--font-sans);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.card[data-card-id="ref-minimal"] .detail {
|
||||
margin: 0;
|
||||
font: 400 36px/1.4 var(--font-sans);
|
||||
color: var(--muted);
|
||||
max-width: 82%;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.card[data-card-id="ref-minimal"] .rule {
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
|
||||
>TAKEAWAY</span
|
||||
>
|
||||
|
||||
<h1
|
||||
class="title"
|
||||
data-anim="kinetic-chars"
|
||||
data-anim-at="0.3"
|
||||
data-anim-duration="0.6"
|
||||
data-anim-stagger="0.05"
|
||||
data-anim-pattern="pop"
|
||||
>
|
||||
<span class="char">五</span><span class="char">秒</span><span class="char">决</span
|
||||
><span class="char">定</span> <span class="char">一</span><span class="char">切</span>
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="rule"
|
||||
data-anim="grow-x"
|
||||
data-anim-at="0.9"
|
||||
data-anim-duration="0.5"
|
||||
data-anim-target-w="240"
|
||||
></div>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.45">
|
||||
用户给一个新界面的时间不超过五秒。这意味着第一屏不需要解释，需要让人立刻知道这是什么、为什么有用。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!--
|
||||
Style: spotlight — dark purple gradient · violet glow · dramatic
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg radial-gradient deep purple-blue (#0e0a24 → #1b1648)
|
||||
ink #f5f3ff (off-white)
|
||||
muted #b6b4d0
|
||||
accent #a78bfa (violet) — used as glow + kicker dot
|
||||
accent2#7c6bff (deeper violet) — used as outer-glow second layer
|
||||
Fonts
|
||||
headline — ui-serif fallback for serif drama; or Playfair-like
|
||||
body — ui-sans-serif
|
||||
Best with
|
||||
layouts: overlay, pip
|
||||
frames: clean (skip hairline/polaroid — clashes with glow)
|
||||
content: 情绪故事 / 旁白 / 角色弧线 / 黑暗时刻
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · spotlight</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-spotlight">
|
||||
<style>
|
||||
.card[data-card-id="ref-spotlight"] .root {
|
||||
--ink: #f5f3ff;
|
||||
--muted: #b6b4d0;
|
||||
--accent: #a78bfa;
|
||||
--accent2: #7c6bff;
|
||||
--font-head: ui-serif, "Songti SC", serif;
|
||||
--font-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
background:
|
||||
radial-gradient(70% 55% at 28% 30%, rgba(167, 139, 250, 0.35) 0%, transparent 55%),
|
||||
radial-gradient(80% 70% at 80% 80%, rgba(124, 107, 255, 0.22) 0%, transparent 60%),
|
||||
linear-gradient(160deg, #1b1648 0%, #0e0a24 100%);
|
||||
padding: 48px 56px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .kicker-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow:
|
||||
0 0 18px var(--accent),
|
||||
0 0 4px var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .kicker {
|
||||
font: 600 16px/1 var(--font-mono);
|
||||
letter-spacing: 0.26em;
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .title {
|
||||
margin: 0;
|
||||
font: 800 104px/1.05 var(--font-head);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.005em;
|
||||
text-shadow: 0 4px 60px rgba(167, 139, 250, 0.45);
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .hl {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 24px rgba(167, 139, 250, 0.7);
|
||||
}
|
||||
.card[data-card-id="ref-spotlight"] .detail {
|
||||
margin: 0;
|
||||
font: 28px/1.55 var(--font-body);
|
||||
color: var(--muted);
|
||||
max-width: 88%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div class="meta">
|
||||
<span
|
||||
class="kicker-dot"
|
||||
data-anim="scale-pop"
|
||||
data-anim-at="0.05"
|
||||
data-anim-duration="0.4"
|
||||
></span>
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.1" data-anim-duration="0.4"
|
||||
>TAKEAWAY</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<h2 class="title" data-anim="blur-in" data-anim-at="0.3" data-anim-duration="0.7">
|
||||
在最暗的房间里，<span class="hl">一道光</span>就够了。
|
||||
</h2>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.5">
|
||||
所有伟大决定都是在不确定的时候做出的。怕的不是黑，是不敢点亮那一根火柴。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!--
|
||||
Style: swiss — pure white · Helvetica · strict double rules · red accent slab
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #ffffff
|
||||
ink #111111
|
||||
muted #555555
|
||||
accent #e8190f (signal red — slab + number)
|
||||
Fonts
|
||||
headline & body — Helvetica / Inter / system sans
|
||||
Best with
|
||||
layouts: split, stack, overlay
|
||||
frames: clean, hairline
|
||||
content: 严肃陈述 / 排版主导 / 文化机构 / 极简数据
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · swiss</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-swiss">
|
||||
<style>
|
||||
.card[data-card-id="ref-swiss"] .root {
|
||||
--bg: #ffffff;
|
||||
--ink: #111111;
|
||||
--muted: #555555;
|
||||
--accent: #e8190f;
|
||||
--font-sans:
|
||||
"Helvetica Neue", Helvetica, "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
padding: 48px 64px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 24px;
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .top-rule {
|
||||
height: 4px;
|
||||
background: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .top-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding-top: 12px;
|
||||
font: 700 14px/1 var(--font-mono);
|
||||
letter-spacing: 0.26em;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .top-meta .num {
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 56px;
|
||||
align-items: end;
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .title {
|
||||
margin: 0;
|
||||
font: 700 116px/0.95 var(--font-sans);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .title .red {
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .detail {
|
||||
margin: 0;
|
||||
font: 400 24px/1.45 var(--font-sans);
|
||||
color: var(--muted);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .slab {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 24px 28px;
|
||||
font: 700 56px/1 var(--font-sans);
|
||||
letter-spacing: -0.02em;
|
||||
align-self: end;
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .slab small {
|
||||
display: block;
|
||||
font: 600 14px/1 var(--font-mono);
|
||||
letter-spacing: 0.18em;
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .bottom-rule {
|
||||
height: 1px;
|
||||
background: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-swiss"] .bottom-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding-top: 12px;
|
||||
font: 600 13px/1 var(--font-mono);
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div>
|
||||
<div
|
||||
class="top-rule"
|
||||
data-anim="grow-x"
|
||||
data-anim-at="0.05"
|
||||
data-anim-duration="0.45"
|
||||
data-anim-target-w="1792"
|
||||
></div>
|
||||
<div
|
||||
class="top-meta"
|
||||
data-anim="fade-in"
|
||||
data-anim-at="0.3"
|
||||
data-anim-duration="0.35"
|
||||
>
|
||||
<span>V—TAKE / TAKEAWAY</span>
|
||||
<span class="num">№ 09</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<h2 class="title" data-anim="fade-in" data-anim-at="0.45" data-anim-duration="0.55">
|
||||
<span class="red">设计</span>不是装饰，<br />而是结构。
|
||||
</h2>
|
||||
<div
|
||||
class="slab"
|
||||
data-anim="slide-in"
|
||||
data-anim-at="0.55"
|
||||
data-anim-duration="0.45"
|
||||
data-anim-from="right"
|
||||
data-anim-distance="120"
|
||||
>
|
||||
92<small>STRUCTURE INDEX</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bottom-rule"></div>
|
||||
<div class="bottom-meta">
|
||||
<span>RATIO 1 : 1.618</span>
|
||||
<span>00:42 → 01:14</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!--
|
||||
Style: terminal — dark · JetBrains Mono · ASCII border · prompt · multi-color highlight
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #0d1117 (deep terminal)
|
||||
ink #e6edf3
|
||||
muted #7d8590
|
||||
accent #4ade80 (green — primary output)
|
||||
accent2#fbbf24 (amber — string/warn)
|
||||
accent3#f472b6 (magenta — variable)
|
||||
accent4#60a5fa (blue — function/path)
|
||||
Fonts
|
||||
mono (everything) — ui-monospace, "SF Mono", Menlo, monospace
|
||||
(Real JetBrains Mono would need a woff2 ship; mono fallback fine.)
|
||||
Best with
|
||||
layouts: split, pip
|
||||
frames: hairline, clean
|
||||
content: 技术分析 / 代码片段 / 性能数据 / 工程思考
|
||||
Notes
|
||||
- "Blinking cursor" must be a CSS animation, NOT a data-anim. Allowed
|
||||
because pure CSS @keyframes on a single visual indicator is harmless.
|
||||
- For animated reveal of lines, use data-anim="fade-in" per line.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · terminal</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-terminal">
|
||||
<style>
|
||||
.card[data-card-id="ref-terminal"] .root {
|
||||
--bg: #0d1117;
|
||||
--ink: #e6edf3;
|
||||
--muted: #7d8590;
|
||||
--green: #4ade80;
|
||||
--amber: #fbbf24;
|
||||
--magenta: #f472b6;
|
||||
--blue: #60a5fa;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
padding: 36px 48px;
|
||||
box-sizing: border-box;
|
||||
font: 28px/1.55 var(--font-mono);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .ascii-frame {
|
||||
position: absolute;
|
||||
inset: 16px;
|
||||
border: 2px solid #2c333e;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #1a1f27,
|
||||
0 0 0 1px #06080c;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .titlebar {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 12px;
|
||||
padding: 0 8px;
|
||||
background: var(--bg);
|
||||
font: 600 14px/1 var(--font-mono);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .content {
|
||||
position: relative;
|
||||
padding: 18px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .prompt {
|
||||
color: var(--green);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .line .blue {
|
||||
color: var(--blue);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .line .amber {
|
||||
color: var(--amber);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .line .pink {
|
||||
color: var(--magenta);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .line .green {
|
||||
color: var(--green);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .line .muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .kicker {
|
||||
color: var(--muted);
|
||||
font: 600 16px/1 var(--font-mono);
|
||||
letter-spacing: 0.22em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .headline {
|
||||
font: 700 56px/1.15 var(--font-mono);
|
||||
color: var(--ink);
|
||||
margin: 4px 0 14px;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .headline .hl {
|
||||
background: rgba(74, 222, 128, 0.18);
|
||||
color: var(--green);
|
||||
padding: 0 6px;
|
||||
}
|
||||
.card[data-card-id="ref-terminal"] .cursor {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 28px;
|
||||
background: var(--green);
|
||||
margin-left: 4px;
|
||||
vertical-align: -4px;
|
||||
animation: ref-term-blink 1s steps(1) infinite;
|
||||
}
|
||||
@keyframes ref-term-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div class="ascii-frame"></div>
|
||||
<span class="titlebar">~/notes/takeaway-007.md</span>
|
||||
|
||||
<div class="content">
|
||||
<div class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.3">
|
||||
$ cat takeaway
|
||||
</div>
|
||||
|
||||
<h2
|
||||
class="headline"
|
||||
data-anim="fade-in"
|
||||
data-anim-at="0.25"
|
||||
data-anim-duration="0.45"
|
||||
>
|
||||
缓存命中率提升到 <span class="hl">92%</span>
|
||||
</h2>
|
||||
|
||||
<div class="line" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.35">
|
||||
<span class="prompt">$</span> bench --tier <span class="amber">"hot"</span>
|
||||
<span class="muted">--n 10k</span>
|
||||
</div>
|
||||
<div class="line" data-anim="fade-in" data-anim-at="0.8" data-anim-duration="0.35">
|
||||
<span class="muted">→</span> <span class="blue">p50</span>=<span class="green"
|
||||
>12ms</span
|
||||
>
|
||||
<span class="blue">p99</span>=<span class="green">38ms</span>
|
||||
<span class="pink">hit</span>=<span class="green">92.4%</span>
|
||||
</div>
|
||||
<div class="line" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.35">
|
||||
<span class="muted">// before this change: hit=63%, p99=210ms</span>
|
||||
</div>
|
||||
<div class="line" data-anim="fade-in" data-anim-at="1.35" data-anim-duration="0.3">
|
||||
<span class="prompt">$</span><span class="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
Style: whiteboard — paper · Caveat handwriting · sketched borders · marker highlight
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #fdf6e3 (warm paper)
|
||||
ink #1a1a1a
|
||||
muted #6e6a5b
|
||||
accent #ff6b35 (orange marker)
|
||||
accent2#2557a7 (blue pen — annotations)
|
||||
accent3#ffe066 (yellow highlighter)
|
||||
Fonts
|
||||
headline & body — Caveat (handwriting); falls back to "ui-serif, cursive"
|
||||
annotations — Caveat
|
||||
Best with
|
||||
layouts: pip, overlay, split
|
||||
frames: polaroid, clean
|
||||
content: 教程 / 解构 / 草图思考 / 灵感整理
|
||||
Notes
|
||||
- SVG strokes have subtle path jitter to look hand-drawn.
|
||||
- data-anim "draw-path" is ideal for the sketched border + highlights.
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · whiteboard</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-whiteboard">
|
||||
<style>
|
||||
.card[data-card-id="ref-whiteboard"] .root {
|
||||
--bg: #fdf6e3;
|
||||
--ink: #1a1a1a;
|
||||
--muted: #6e6a5b;
|
||||
--accent: #ff6b35;
|
||||
--accent2: #2557a7;
|
||||
--accent3: #ffe066;
|
||||
--font-hand: "Caveat", "LXGW WenKai TC", ui-serif, cursive;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.025) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
|
||||
padding: 48px 56px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-hand);
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .sketch-border {
|
||||
position: absolute;
|
||||
inset: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .sketch-border path {
|
||||
stroke: var(--ink);
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .kicker {
|
||||
align-self: flex-start;
|
||||
font: 700 32px/1 var(--font-hand);
|
||||
color: var(--accent);
|
||||
transform: rotate(-2deg);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .title {
|
||||
margin: 0;
|
||||
font: 700 120px/1 var(--font-hand);
|
||||
color: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .marker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .marker::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
bottom: 18%;
|
||||
background: var(--accent3);
|
||||
z-index: -1;
|
||||
transform: skewX(-4deg);
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .detail {
|
||||
margin: 0;
|
||||
font: 400 40px/1.4 var(--font-hand);
|
||||
color: var(--muted);
|
||||
max-width: 92%;
|
||||
}
|
||||
.card[data-card-id="ref-whiteboard"] .note {
|
||||
align-self: flex-start;
|
||||
padding: 6px 12px;
|
||||
font: 600 28px/1 var(--font-hand);
|
||||
color: var(--accent2);
|
||||
border-bottom: 3px wavy var(--accent2);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<svg class="sketch-border" viewBox="0 0 1888 1048" preserveAspectRatio="none">
|
||||
<path
|
||||
d="M 12 12 L 1876 16 L 1872 1036 L 16 1032 Z"
|
||||
data-anim="draw-path"
|
||||
data-anim-at="0.05"
|
||||
data-anim-duration="0.8"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="kicker" data-anim="fade-in" data-anim-at="0.1" data-anim-duration="0.4">
|
||||
✎ TAKEAWAY
|
||||
</span>
|
||||
|
||||
<h2 class="title" data-anim="fade-in" data-anim-at="0.4" data-anim-duration="0.5">
|
||||
把复杂问题<span class="marker">画出来</span>。
|
||||
</h2>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="0.85" data-anim-duration="0.45">
|
||||
文字让人争辩，图让人对齐。当所有人都在白板前看同一张图，分歧自然消失。
|
||||
</p>
|
||||
|
||||
<span class="note" data-anim="fade-in" data-anim-at="1.2" data-anim-duration="0.4">
|
||||
← 试试每次会议都画
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!--
|
||||
Style: xhs (小红书) — cream + hot pink · chips · #hashtags · ❤️💬 row
|
||||
─────────────────────────────────────────────────────────────────────
|
||||
Tokens
|
||||
bg #fff5e9 (warm cream)
|
||||
ink #1d1418
|
||||
muted #8a7a78
|
||||
accent #ff2e63 (hot pink — chip + interaction icon)
|
||||
accent2#ff8a4c (orange — tag)
|
||||
accent3#f0c419 (yellow — pin)
|
||||
Fonts
|
||||
headline & body — Noto Sans SC fallback: ui-sans-serif, system-ui, "PingFang SC", sans-serif
|
||||
Best with
|
||||
layouts: overlay, stack (especially in portrait/9:16)
|
||||
frames: clean, polaroid
|
||||
content: 社交剪辑 / 生活方式 / 种草 / 短视频高光
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>style · xhs (小红书)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0a0c12;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="card-host">
|
||||
<div class="card" data-card-id="ref-xhs">
|
||||
<style>
|
||||
.card[data-card-id="ref-xhs"] .root {
|
||||
--bg: #fff5e9;
|
||||
--ink: #1d1418;
|
||||
--muted: #8a7a78;
|
||||
--accent: #ff2e63;
|
||||
--accent2: #ff8a4c;
|
||||
--accent3: #f0c419;
|
||||
--font-sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
padding: 36px 44px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ff2e63, #ff8a4c);
|
||||
box-shadow:
|
||||
0 0 0 3px #fff,
|
||||
0 0 0 4px rgba(255, 46, 99, 0.3);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .user-info {
|
||||
flex: 1;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .user-name {
|
||||
font: 700 22px/1.1 var(--font-sans);
|
||||
color: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .user-sub {
|
||||
font: 400 16px/1.3 var(--font-sans);
|
||||
color: var(--muted);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .follow {
|
||||
padding: 8px 20px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font: 700 16px/1 var(--font-sans);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .title {
|
||||
margin: 0;
|
||||
font: 800 84px/1.1 var(--font-sans);
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .title .heart {
|
||||
color: var(--accent);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .detail {
|
||||
margin: 0;
|
||||
font: 500 28px/1.5 var(--font-sans);
|
||||
color: var(--ink);
|
||||
max-width: 94%;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .tag {
|
||||
padding: 8px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 46, 99, 0.12);
|
||||
color: var(--accent);
|
||||
font: 600 18px/1 var(--font-sans);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .tag.orange {
|
||||
background: rgba(255, 138, 76, 0.16);
|
||||
color: var(--accent2);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .tag.yellow {
|
||||
background: rgba(240, 196, 25, 0.18);
|
||||
color: #a98209;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .interactions {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
margin-top: auto;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
font: 700 22px/1 var(--font-sans);
|
||||
color: var(--ink);
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .interactions span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.card[data-card-id="ref-xhs"] .interactions .heart-ic {
|
||||
color: var(--accent);
|
||||
font-size: 26px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root">
|
||||
<div class="user-row" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4">
|
||||
<div class="avatar"></div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">@小研究员</div>
|
||||
<div class="user-sub">关注我，看我每天拆一段视频 · 18分钟前</div>
|
||||
</div>
|
||||
<div class="follow">+ 关注</div>
|
||||
</div>
|
||||
|
||||
<h2 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.5">
|
||||
亲测有效！<span class="heart">♥</span> 30 秒抓住注意力的小技巧
|
||||
</h2>
|
||||
|
||||
<p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
|
||||
开头别废话——直接抛结论。听众的大脑在前 3 秒就决定要不要继续，
|
||||
这是平台算法之外，最朴素也最重要的事实。
|
||||
</p>
|
||||
|
||||
<div class="tags" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.4">
|
||||
<span class="tag">#内容创作</span>
|
||||
<span class="tag orange">#播客剪辑</span>
|
||||
<span class="tag yellow">#开头技巧</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="interactions"
|
||||
data-anim="fade-in"
|
||||
data-anim-at="1.25"
|
||||
data-anim-duration="0.4"
|
||||
>
|
||||
<span><span class="heart-ic">♥</span> 12.4k</span>
|
||||
<span>💬 386</span>
|
||||
<span>⭐ 891</span>
|
||||
<span
|
||||
style="margin-left: auto; color: var(--muted); font-weight: 400; font-size: 18px"
|
||||
>📤 分享</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user