| 1 | spec_version: 1 |
| 2 | id: frame-creative-voltage |
| 3 | name: Creative Voltage |
| 4 | description: > |
| 5 | Electric-blue / dark offset split with a hand-drawn script accent — panels slide in |
| 6 | offset, a display title rises with one electric outlined word, and a handwritten script |
| 7 | strokes itself in over a swept underline. Energetic, retro-modern, playful. Distilled |
| 8 | from the frontend-slides "Creative Voltage" preset. |
| 9 | |
| 10 | engine: hyperframes |
| 11 | engine_version: ^0.4.0 |
| 12 | source_entry: source/index.html |
| 13 | |
| 14 | category: presentation |
| 15 | subcategory: title-card |
| 16 | tags: [split-panel, electric, script, retro-modern, voltage, energetic] |
| 17 | |
| 18 | best_for: |
| 19 | - "Energetic brand / campaign title" |
| 20 | - "Creative reveal with a human, hand-drawn accent" |
| 21 | - "Retro-modern hero" |
| 22 | |
| 23 | output: |
| 24 | formats: [mp4, webm] |
| 25 | default_format: mp4 |
| 26 | resolution: |
| 27 | default: { width: 1920, height: 1080 } |
| 28 | supported_aspects: ["16:9", "1:1"] |
| 29 | fps: |
| 30 | default: 60 |
| 31 | supported: [30, 60] |
| 32 | duration: |
| 33 | type: variable |
| 34 | min_sec: 3 |
| 35 | max_sec: 6 |
| 36 | alpha: false |
| 37 | audio: |
| 38 | supported: true |
| 39 | expected_inputs: [bgm] |
| 40 | |
| 41 | inputs: |
| 42 | schema: |
| 43 | type: object |
| 44 | required: [display_lines] |
| 45 | properties: |
| 46 | meta: |
| 47 | type: "string" |
| 48 | maxLength: 40 |
| 49 | description: "Mono meta line on the blue panel (e.g. // CREATIVE_MODE · ON)" |
| 50 | display_lines: |
| 51 | type: "array" |
| 52 | items: { type: "string" } |
| 53 | maxItems: 4 |
| 54 | description: "Display title lines (right); mark one line as the electric outlined accent" |
| 55 | script: |
| 56 | type: "string" |
| 57 | maxLength: 24 |
| 58 | description: "Handwritten script accent on the blue panel" |
| 59 | caption: |
| 60 | type: "string" |
| 61 | maxLength: 60 |
| 62 | description: "Mono caption, bottom-right" |
| 63 | duration_sec: |
| 64 | type: "number" |
| 65 | minimum: 3 |
| 66 | maximum: 6 |
| 67 | default: 4 |
| 68 | examples: |
| 69 | - {"meta": "// CREATIVE_MODE · ON", "display_lines": ["Render", "any", "video."], "script": "make it move", "caption": "html-video · creative voltage"} |
| 70 | |
| 71 | license: |
| 72 | spdx: Apache-2.0 |
| 73 | attribution_required: true |
| 74 | redistribution_allowed: true |
| 75 | commercial_use: true |
| 76 | |
| 77 | provenance: |
| 78 | # L1 — original design inspiration (real world) |
| 79 | origin: |
| 80 | name: none (original preset by the L2 skill author) |
| 81 | kind: none |
| 82 | reference: "No specific real-world studio; the 'Creative Voltage' look is an original preset composed by the frontend-slides author" |
| 83 | # L2 — the open-source skill we actually transformed from (license governs here) |
| 84 | via_skill: |
| 85 | name: frontend-slides |
| 86 | author: "Zara Zhang" |
| 87 | url: https://github.com/zarazhangrui/frontend-slides |
| 88 | license: MIT |
| 89 | source_file: STYLE_PRESETS.md (preset "Creative Voltage") |
| 90 | # L3 — what this template does |
| 91 | transformation: > |
| 92 | Static slide preset → animated hyperframes timeline (offset panels slide in, display |
| 93 | title rises with one electric outlined word, handwritten script strokes itself in over |
| 94 | a swept underline) built as original CSS/SVG keyframes. Original sample data. |
| 95 | No upstream source code copied verbatim. |
| 96 | |
| 97 | author: |
| 98 | name: nexu-io |
| 99 | url: https://github.com/nexu-io |
| 100 | contact: open-design@nexu.io |
| 101 | |
| 102 | version: 0.1.0 |
| 103 | changelog: |
| 104 | - version: 0.1.0 |
| 105 | date: 2026-06-03 |
| 106 | notes: Distilled from the frontend-slides Creative Voltage preset into an animated html-video template. |
| 107 | |
| 108 | preview: |
| 109 | poster: preview.png |
| 110 | |
| 111 | performance: |
| 112 | reference_render: |
| 113 | duration_sec: 4 |
| 114 | render_wall_clock_sec: 8 |
| 115 | machine: "M2 MacBook Air" |
| 116 |