Communitygithub.com

bassam1998new-ops/hyperframes-students

Build a video in the Mint Lecture Room look (style card mint-lecture-room) — a calm classroom cut of a real lesson: one long take with slow zooms that follow the point, a topic lower third, a quiz card that asks, counts down think-time and then answers, and karaoke captions that light the current word. Use when the director picked this card, or the owner says "make it in the lecture room style", "lecture clip", "course cut", "quiz card", "قص من المحاضرة", "سؤال وجواب", or the video is a lecture clip or quick tutorial cut from his AI course recordings (Egyptian Arabic). 9:16 reels. Not for AI news or direct offers.

hyperframes-students とは?

hyperframes-students is a Claude Code agent skill that build a video in the Mint Lecture Room look (style card mint-lecture-room) — a calm classroom cut of a real lesson: one long take with slow zooms that follow the point, a topic lower third, a quiz card that asks, counts down think-time and then answers, and karaoke captions that light the current word. Use when the director picked this card, or the owner says "make it in the lecture room style", "lecture clip", "course cut", "quiz card", "قص من المحاضرة", "سؤال وجواب", or the video is a lecture clip or quick tutorial cut from his AI course recordings (Egyptian Arabic). 9:16 reels. Not for AI news or direct offers.

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bassam1998new-ops/hyperframes-students/tree/HEAD/.claude/skills/style-mint-lecture-room

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント


name: style-mint-lecture-room description: Build a video in the Mint Lecture Room look (style card mint-lecture-room) — a calm classroom cut of a real lesson: one long take with slow zooms that follow the point, a topic lower third, a quiz card that asks, counts down think-time and then answers, and karaoke captions that light the current word. Use when the director picked this card, or the owner says "make it in the lecture room style", "lecture clip", "course cut", "quiz card", "قص من المحاضرة", "سؤال وجواب", or the video is a lecture clip or quick tutorial cut from his AI course recordings (Egyptian Arabic). 9:16 reels. Not for AI news or direct offers.

Style: Mint Lecture Room

A calm classroom cut: the lesson plays on, slow zooms follow the point, a quiz card asks, waits, then answers. No cuts on silence — zooms replace cuts. Card: video-projects/_library/styles/mint-lecture-room/style.md — draft (not approved yet — say so to the owner). Card brand: any (the hex values are examples).

Look first (in the style folder): frames/01-lesson-lower-third-karaoke.png (not in the public repo) · frames/02-question-think-rail.png (not in the public repo) · frames/03-answer-reveal.png (not in the public repo). Source project (still builds; its old render was cleaned away): an earlier project (not public).

0. Apply the card first

node tools/vid.mjs style apply mint-lecture-room <project> [--mode calm|punchy]
node tools/vid.mjs style show mint-lecture-room

Job steps (picking the clip, captions): brain/Jobs/Lecture clip.md.

1. Colours = roles (the brand fills the hex)

Style = quality, structure and motion. The midnight + mint + pink is the Midnight reference — another brand fills the roles from brand/<name>.md.

RoleExample colour (not a real brand)From the brand
field behind cards#1F1428canvas (dark)
body ink / spoken words#E5DAED / #FFFFFFtext / text-strong
rules, glows, chip tint#A05FEFprimary
"now": active caption word, progress rail, number chip#6FDCDAthe scarce highlight (Midnight: mint)
punctuation: question mark, payoff dot#F36D78the brand's punctuation colour (Midnight: pink) — a mark only
dim text#CCB1DF / #C18AF6muted
The lecture-* blocks hold these colours inline — lift them to CSS variables (e.g. --bg, --ink, --accent, --live, --mark, --dim) when you bring them in, then fill from the brand.

2. Build it

  • Blocks (_library/compositions/portrait/), bring each in with node tools/vid.mjs use <block> <project>:
    • lecture-lower-third-9x16 — topic / name strap (0–6 s).
    • lecture-question-card-9x16 — 8 s question → 3 s think-time rail → answer.
  • Starter project: an earlier project (not public) — one lesson <video>, both blocks wired, karaoke captions, the zoom timeline.
  • Footage: one continuous lesson clip, re-encoded first (ffmpeg … -crf 20 … -movflags +faststart, dense keyframes — _library/COURSE-STUDIO.md (not in the public repo)).
  • Layout 9:16 (1080×1920): footage fills the frame; lower third and question card sit in the middle band; captions 42 px/700; everything inside x 60–960, y 220–1500. Fonts: Tajawal 500/700 (Arabic), JetBrains Mono 700 (number chip, kicker).
  • Layout 16:9: not built yet.
  • Camera (motion tokens): on a wrapper <div> around the video (never the <video>), origin 50% 35%: slow drift 1 → 1.06 (power1.inOut), a 3 s punch-in to 1.25 (power2.inOut), a long ease back out, a 1.4 s punch-in to 1.2 on the closing line. The zoom never moves while a card is up.
  • Text animations: question lines rise from a mask (y 110% → 0, 0.55 s, 0.22 s stagger from the right) · kicker and number chip drop in (y −12, 0.45 s) · a rule draws scaleX 0 → 1 (0.55 s) · progress rail fills over 3 s linear · answer scale-pops 0.92 → 1 back.out(1.5) + the payoff dot slides in · karaoke: all words at 35%, current word in the "now" colour with a soft glow, spoken words full white (instant class switch).
  • Transitions: none between shots (single take); cards fade in and out on their own layer (exit 0.4–0.5 s power2.in).
  • Modes: calm = as shipped (one take, slow zooms, no music, no SFX) · punchy (untested) = jump-cut the silences, snap zooms on key words, soft tick when the answer lands (_library/assets/sfx/el/ui-pop.mp3 (not in the public repo)).
  • Sound: the lecture's own audio only, normalise the voice to −14 LUFS. No music in calm; if ever needed, from _library/assets/music (not in the public repo) — never generate.

3. Checks before the owner sees it

  1. npx hyperframes lint inside the project — 0 errors.
  2. npx hyperframes snapshot --at <lower third, question, rail half, answer> — Read every frame.
  3. npx hyperframes render --quality draft → node tools/vid.mjs judge <draft.mp4> → Read sheet.jpg and safe-sheet.jpg.
  4. Safe zone x 60–960, y 220–1500 · the instructor's face (if visible) not covered · Arabic joined, right-to-left, never split per letter; RTL on the block's root element, never dir="rtl" on <html>.
  5. Style checks: caption words checked against the audio (the source transcript looked misheard); cards sit in the teacher's natural pauses; one pink mark per card.

Do / Don't

  • Do: place cards in natural pauses; give think-time before the answer; check captions against the audio.
  • Don't: cut on silence inside the lecture; stack a card on top of an active zoom; use the punctuation colour for anything bigger than a mark.

After the job: node tools/vid.mjs style comment mint-lecture-room "<what worked or not>".

Individual skills in this repo

This repo contains 14 individual skills — each has its own dedicated page.

bassam1998new-ops/hyperframes-students

Make a new video with a beginner, start to finish — a few easy questions, pick a look from this repo's styles, build it with HyperFrames, check the frames, render and show it. Use when the student says "new video", "make a video", "اعمل فيديو", "عايز فيديو", "reel", "animation", or asks how to start a video. Hands the technical HyperFrames rules to the official hyperframes skills.

bassam1998new-ops/hyperframes-students

First-time setup for the HyperFrames student studio. Checks the computer (Git, Node.js, FFmpeg, the render browser), explains in plain words what is missing, recommends what to install, asks before installing anything, then makes a 3-second test video to prove it all works. Use when the student says "setup", "install", "اعمل setup", "نزّل البرامج", "it doesn't work", "command not found", when node_modules is missing, or when `npx hyperframes doctor` shows a red item. Safe to run again any time — it skips what is already done.

bassam1998new-ops/hyperframes-students

Build a video in the Amber Grid Newsroom look (style card amber-grid-newsroom) — a hot "breaking news" desk: near-black grid field, the real screen recording in a framed window with instant reframes, an English title over an Arabic title line, and karaoke captions where the spoken word turns hot. Use when the director picked this card, or the owner says "make it in the amber newsroom style", "news desk", "breaking news look", "زي ريل opus 5.5", "ستايل الأخبار", or the video is AI news or a build show-off cut from his OBS screen recording with an Egyptian Arabic voice-over. 9:16 reels. Not for lecture clips or direct offers.

bassam1998new-ops/hyperframes-students

Build a video in the Cream Caret Type look (style card cream-caret-type) — Arabic words typed with a coloured caret on a flat two-colour page (night and paper that swap on hard cuts), select-highlight → delete → retype, a flat profile silhouette, one coloured dot that match-cuts into a flat vector eye, a zoom-through the iris, a fixed noun with a bold verb swapping every 16 frames, a pixel-art icon on the sign-off and a monogram end card — one sound per event, silence between. Use when the director picked this card, or the owner says "the typing intro", "caret type", "cream caret", "زي فيديو الكتابة", "الكلام اللي بيتكتب", "intro بالكتابة", or the video is a channel / "who am I" intro, a course or service intro hook, a short opener before a talking head, a word-play promise line or a bumper. 9:16 only, Arabic-first. Not for talking heads the whole time, screen-recording proof, data-heavy explainers or full spoken subtitles. DRAFT — untested.

bassam1998new-ops/hyperframes-students

Build a video in the Floating Desk Zoom look (style card floating-desk-zoom) — real app windows float as cards on warm paper, a virtual camera hard-cuts in on the action, follows the typing and glides back out. Use when the director picked this card, or the owner says "make it in the floating desk style", "paper desk", "zoom on the screen like the launch video", "اعمله على الورق", or the video is a build show-off, quick tutorial or AI news made from his OBS screen recording with a voice-over. Arabic or English; 9:16 reels. Not for lecture clips or talking heads.

bassam1998new-ops/hyperframes-students

Build a video in the Hatch Cosmos look (style card hatch-cosmos) — a hand-drawn pencil-hatched world on one canvas, a block mascot (or a pair) that walks, looks, blinks and does ^ ^ eyes, a dive through its eye into a hatched galaxy of nebula blobs, tilted rings and needle stars. Use when the director picked this card, or the owner says "hatched", "hatch cosmos", "pencil cosmos", "the galaxy video style", "the mascot dive", "زي فيديو المجرة", "الستايل المرسوم بالقلم", "الكائن اللي بيدخل في عينه", or the video is a music-led show-off/teaser, a concept intro with a mascot, a "journey inside" beat or a channel bumper. 9:16 and 16:9 both built. Not for talking heads, real screen-recording proof, data-heavy explainers or photographic looks.

bassam1998new-ops/hyperframes-students

Build a video in the Horizon Prompt One-shot look (style card horizon-prompt-oneshot) — one continuous camera on a near-black stage lit by a soft planet-horizon glow; a glass app bar, a cursor and a prompt box morph into each other, a prompt is typed, the send button grows into a tile that blooms into a full-frame result, then a light wipe to a logo end card, every beat hit-synced to a UI sound. Use when the director picked this card, or the owner says "horizon prompt", "the prompt one-shot", "the ChatGPT-style promo", "زي فيديو البرومبت", "الكيرسر اللي بيكتب البرومبت", or the video is an AI tool show-off / prompt-to-result demo, a course or service promo opener, a launch teaser or a channel bumper. Not for talking heads, real screen-recording proof, data-heavy explainers or long tutorials. DRAFT — untested.

bassam1998new-ops/hyperframes-students

Remix 2+ existing style cards of the Hyperframes video workspace into one NEW draft style card, layer by layer (palette roles, type, texture, grade, camera, light, edit rhythm, transitions, motion, sound, prompt parts), then let the owner pick the skills for the video and start the director. Use when the owner says "hybrid style", "remix styles", "mix two styles", "combine styles", "اعمل هايبرد", "ادمج الستايلين", or ticks cards and presses "Remix these" on the Styles board.

bassam1998new-ops/hyperframes-students

Build a video in the Midnight Kinetic Type look (style card midnight-kinetic-type) — clean motion type on a flat dark field, word-by-word mask rises, one accent word that lands alone, icon strokes that draw on, and hard cuts on the music's beat grid. Use when the director picked this card, or the owner says "make it in the kinetic type style", "midnight type", "like an earlier project", "تايبوجرافي متحركة", or the video is a direct offer, proof / results reel or AI news told with type, music and SFX (no face, no footage). Arabic (Cairo, per-word) and English (Inter) versions; 9:16 reels. Not for lecture clips or quick tutorials.

bassam1998new-ops/hyperframes-students

Build a video in the Midnight Screen Desk look (style card midnight-screen-desk) — a calm, organised news desk in three fixed zones: an Arabic info card on top, the real screen recording in a glowing band with punch-ins in the middle, and word-by-word captions (dim → bright) below. Use when the director picked this card, or the owner says "make it in the screen desk style", "three zones", "like the AI releases reel", "كارت فوق والشاشة في النص", or the video is AI news, a build show-off or a quick tutorial cut from his screen recording with an Egyptian Arabic voice-over. 9:16 reels. Not for lecture clips or direct offers.

bassam1998new-ops/hyperframes-students

Build a video in the Neon Node Explainer look (style card neon-node-explainer) — a plain stage, one headline per spoken sentence, and one small glowing diagram (tiles, lines, packets, checks, terminal, tool list) that builds itself part by part. Use when the director picked this card, or the owner says "make it in the neon node style", "node explainer", "API vs MCP style", "اعمله زي فيديو الـ MCP", or the video is an AI explainer, concept explainer, quick tutorial or AI news with a voice-over and no face. Arabic headlines + English mono labels; 9:16 and 16:9 both built. Not for talking heads, warm stories, real screen-recording demos or music-only hype reels.

bassam1998new-ops/hyperframes-students

Build a video in the Swiss Motion Reel look (style card swiss-motion-reel) — a Swiss-grid "instrument panel" with a constant thin HUD, flat 2-colour blocks, word slams, shape match-cuts and hard cuts on a 128 BPM beat. Use when the director picked this card, or the owner says "make it in the Swiss style", "motion reel", "like the motion designer reel", "HUD reel", "ستايل سويسري", or the video is a brand sizzle, product intro, "what we do" reel, launch teaser or any no-person, graphics-only, music-led video. Latin display type with Arabic in a clean geometric sans; built and tested in 16:9, 9:16 still to build. Not for talking heads, screen-recording tutorials or long voice-led explainers.

bassam1998new-ops/hyperframes-students

Build a video in the Warm Glass Face-cam look (style card warm-glass-facecam) — the presenter talks to camera while frosted-glass panels with one warm glow land exactly where he points; blur-punch text, a karaoke pill, small charts, and a shrink into a rounded picture-in-picture for the demo part. Use when the director picked this card, or the owner says "make it in the warm glass style", "glass panels over my face", "face-cam with glass cards", "PiP intro", "كروت زجاج وأنا بتكلم", or the video is a build show-off or quick tutorial with the owner on camera. Source is English 16:9; the 9:16 and Arabic versions still have to be built at the first job. Not for lecture clips or AI news.

bassam1998new-ops/hyperframes-students

Build a video in the <Style name> look (style card <slug>). Use when the director picked this style card, when the owner says "make it in the <Style name> style", "<slug>", "استايل <Style name>", or the video type is <video types from use_when>. Works for Arabic (Egyptian) and English, 9:16 reels<, and 16:9 if supported>. Not for <avoid_when>.

関連スキル