Noti Tiktok Vn

TikTok VN Edit - the Noti.vn / GĐT standard

⚖️ STYLE DESIGN - PRIORITY RULE (read this first)

If the edit prompt contains a "STYLE DESIGN (BẮT BUỘC TUÂN THỦ 100%)" section: the palette, fonts and tone in that section COMPLETELY REPLACE every color/font/branding rule in this skill (including "dark fintech blue", the GĐT hex values, the default gradient...). Keep only: animation technique, layout, cutting rhythm, render workflow, the bug fixes. Illustrations generated through /api/illustrations must pass the correct styleId in the prompt. NO Style Design section → use the skill's default branding.

If the edit prompt ALSO contains a "PHONG CÁCH DỰNG" (video style) section: that section WINS over this skill for ALL visual and motion language - materials, transitions, camera moves, effects. This skill then keeps only PROCESS: step order, cutting, captions/keys, draft→final, QC. Do not mix the skill's default visuals into the video style - half-and-half is exactly the failure this rule exists to prevent.

This skill builds Vietnamese vertical TikTok videos with HyperFrames (HTML/CSS/JS + GSAP → MP4). Project structure: scaffold with npx hyperframes init, then follow the layout documented in the video-pipeline skill: index.html + compositions/*.html + assets/ + renders/ + hyperframes.json + meta.json. (video-projects/sapo/ is an example project on the author's machine and is NOT shipped with the repo - video-projects/ is gitignored. If that folder is absent, everything you need is written out inline below.)

⚡ Read this whole file before building. Every ⚠️ section is a bug already hit & already fixed - do NOT repeat it.

---

ROLE

Video editor working in HyperFrames. Compose HTML/CSS/JS, animate with GSAP, render a vertical MP4.

OUTPUT SPEC

• 9:16 - 1080×1920, 30fps (60fps if there is a lot of kinetic typography).
• TikTok safe zone: leave 15% at the bottom (~288px) + 12% on the right (~130px). Important text + CTA go in the safe upper-middle area. Put captions at bottom: ~372px (above the app button column).
• Each scene = its own HTML sub-composition (<template> + data-composition-src), timed via data-start/data-duration/data-track-index.

STYLE (Noti.vn / GĐT)

• Dark background #0A0E1A → #0F1629 (gradient) + light grain.
• Accent gradient text: linear-gradient(100deg, #0061ff, #00c2ff) via background-clip:text for headings.
• Glassmorphism: background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); border-radius: 20px; with the edge drawn by box-shadow (do NOT use a hard 1px border): box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.05), 0 18px 50px rgba(0,0,0,0.45);
• Type: headings weight 800, subheads 600, body 400. Tight letter-spacing (-0.03em) on large headings.
• Glow on emphasized text: filter: drop-shadow(0 0 26px rgba(0,140,255,0.4)) (drop-shadow for gradient text, NOT text-shadow, because the glyphs are transparent).

EFFECTS (GSAP)

• Text reveal: y 40→0, opacity 0→1, stagger 0.06–0.09, ease power3.out.
• Kinetic keyword: scale-pop 0.8→1.05→1 + glow flash (tween the filter drop-shadow).
• Karaoke caption: locked to timestamps, chunks of 4–7 words, the word being spoken highlighted #19c8ff + scale 1.13.
• Scene changes: blur+fade crossfade 0.4s by default; slide-push (power4.inOut) on fast beats; scale-zoom on accent scenes (see the 🔍 ZOOM section).
• Background: slow drifting blue gradient blobs (parallax) + deterministic CSS grain.
• ⚠️ NEVER use setTimeout/Date.now()/Math.random() - GSAP timeline only (HyperFrames captures frames by timeline time). Every animation must be deterministic.

---

🔍 ZOOM / PUNCH-IN (kills static, boring footage)

A talking head sitting still for 30–60s is deadly dull. Add camera motion (zoom) locked to timestamps + matched to SFX + fitting the content to hold the eye. This is the main retention driver → it is MANDATORY in every video, unless the video style's (PHONG CÁCH DỰNG) motion spec says otherwise.

⚠️⚠️ TECHNIQUE (MANDATORY - getting this wrong freezes the frame)

• NEVER animate width/height/top/left on a <video> → the frame freezes (already noted in RENDER CONTRACT). Zoom = animate scale (transform) on the DIV wrapping the video (#face-wrapper), never directly on the <video>.

  #face-wrapper { position:absolute; inset:0; overflow:hidden; will-change:transform; }
  #face-video { width:100%; height:100%; object-fit:cover; }

  // aim transform-origin at the PERSON'S FACE (not the frame center) so the zoom lands on the face, not the forehead/chin
  gsap.set("#face-wrapper", { transformOrigin: "50% 38%" });
  // accent punch-in: snap in, hold, release
  tl.to("#face-wrapper", { scale: 1.12, duration: 0.30, ease: "power4.out" }, AT)
    .to("#face-wrapper", { scale: 1.0,  duration: 0.45, ease: "power2.inOut" }, AT + HOLD);

• ⚠️ Zoom the face layer only (the video wrapper). Do NOT put captions/kinetic text/SFX inside the zoomed wrapper - captions must stay put inside the safe zone, otherwise they drift or get clipped during the zoom.
• ⚠️ Keep transform-origin fixed for the whole zoom move (do not change it mid-move → visible jerk). Every tween deterministic (GSAP timeline, no setTimeout/random).
• ⚠️ Scaling up exposes the frame edges → the wrapper must be overflow:hidden and the video object-fit:cover with enough overscan; keep the punch amplitude small (see below) so the edge never reveals the background.

3 zoom types (pick by content)

Sync rules (timestamp ↔ content ↔ SFX)

1. Zoom beat = content beat: the punch-in must land exactly on the frame where the keyword/number starts appearing (taken from the caption word timestamps), never placed at random.
2. Zoom matches the SFX: the punch-in scale-up must coincide exactly with the onset of the accent SFX (e.g. pop.mp3/ding.mp3/anime-wow-1.mp3) → the SFX data-start = the moment the scale tween begins. Eye sees the zoom and ear hears the hit on the same frame → the accent is doubled (see the 🔊 SOUND EFFECT section).
3. Fit the content & the emotion: zoom IN on emphasis/tension/numbers/punchlines; zoom OUT on scene openings/reveals/tempo drops; leave the rest on a light Ken Burns or hold still. Never zoom against the emotion (e.g. zooming out during a hard payoff line).
4. Restraint: roughly 1 accent zoom every 4–8s, do NOT zoom on every sentence (dizzying, and the accent stops meaning anything). Between accents let the Ken Burns run underneath.

Verify the zoom (mandatory on the draft render)

Extract frames right at the edges of the zoom move (start, peak, end) - e.g. for a punch at 14.2s pull 14.1 / 14.4 / 15.0s - and check: the face scales smoothly with no distortion/freeze, no background edge exposed, the caption still sits still in place, and the zoom landing matches the SFX onset (listen back to that stretch).

---

🔊 SOUND EFFECT (synced with the zoom & the content)

Shared library: assets/sound-effects/ (from inside a project: ../../assets/sound-effects/). The recommended set = the entries tagged hay-dung in assets/sound-effects/library.json. Skip any entry whose file is not on disk - library.json still lists a few files that are not shipped with the repo. The exact <audio id="sfx-*"> wiring is in "Wiring it in" below.

Picking SFX yourself (by content + timestamp + zoom)

1. Read the transcript + caption timestamps + storyboard → find the "accent points" that need sound: numbers/count-ups, keyword reveals, punch-in zoom beats, hard scene changes, punchlines, the closing CTA.
2. Map each accent point → 1 semantically fitting SFX. data-start = the exact EVENT beat (= the zoom beat if that accent has a zoom), NOT the vague start of the scene.
3. ⚠️ Restraint: about 1 SFX every 3–6s, not one hit per sentence. Vary the files, avoid repeating a single sound too densely.
4. Present the SFX table + the ZOOM table to the user for approval (timecode | event | zoom | SFX file | volume) together with the storyboard before wiring anything in.

Semantic map → file: good numbers → ding.mp3/ting.wav; money → ka-ching.mp3/money.mp3; element/keyword pop → pop.mp3; image/snapshot → camera-snap.wav/camera-flash-1.wav; bad/wrong numbers → error.mp3; wow/punch → anime-wow-1.mp3; typing → mechanical-keyboard.mp3/iphone-typing.mp3; click → click-button.mp3/mouse-click.mp3.

Wiring it in:

1. Copy the chosen file into assets/sfx/ (keeps the project portable - do NOT let src point outside the project).
2. Each SFX = its own <audio> in the root composition, next to the narration <audio>. ⚠️ NO class="clip" on <audio> (Render Contract - it breaks audio):

   <audio id="sfx-1" data-start="14.20" data-duration="2.0" data-track-index="6" data-volume="0.5" src="assets/sfx/pop.mp3"></audio>

3. ⚠️ Every SFX gets its OWN data-track-index (4,5,6,…) - clips on the same track must NOT overlap in time. Narration is on track 0; SFX use tracks 4 and up.
4. ⚠️ Volume data-volume 0.4–0.6 (under the narration at 1.0) so it never buries the voice; a comedic punch can go 0.55–0.65.
5. data-duration long enough for the SFX to finish ringing (1–3s); too short and it gets cut off.

SFX loudness and lead silence (verified)

Four production-verified lessons - skipping any of them produced audible bugs:

1. Trim lead silence via data-media-start, not by re-encoding. Many library files carry 0.1–1.0s of silence before the actual sound, so the SFX lands late even with a correct data-start. Probe each file with ffmpeg -af silencedetect=noise=-45dB:d=0.05 and set data-media-start (HyperFrames) / mediaStart (Remotion manifest) to skip it.
2. Set the volume with an ffmpeg mix test, not by guessing. Mix voice + SFX, then measure a NARROW window around the SFX onset (roughly the SFX ring time, e.g. -ss <onset> -t 1.5 + volumedetect/ebur128) - a whole-file mean tells you nothing about whether the hit buries the voice at that moment.
3. When picking SFX, reject by the file's own PEAK, not just its mean loudness. A file with a modest mean can still have a peak that spikes over the voice.
4. Give the voice headroom BEFORE layering SFX. A voice source peaking at -0.0 dB has no room for anything on top - scale it first (measured: peak -0.0 dB → volume=0.71), then mix the SFX and re-check true peak.

---