#822 by GitHub stars

bangtutorial/bang-motion

Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill in

Claude Code Design

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c1aa65e921c9 → c1aa65e921c9

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c1aa65e921c9

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit c1aa65e921c970d858705fcb4a53a8294d1a4131

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/bangtutorial/bang-motion.git .hotskills/bangtutorial-bang-motion && git -C .hotskills/bangtutorial-bang-motion checkout --detach c1aa65e921c970d858705fcb4a53a8294d1a4131
# Copy each selected skill directory from .hotskills/bangtutorial-bang-motion into .claude/skills/<skill-name>/

1.1kGitHub stars

330stars in 7 days

1skill in this repository

0commits in 30 days

Heat

6.9

Star growth, last 7 daysAhead of 100% of tracked repositories
Star growth, last 24 hoursAhead of 99% of tracked repositories
Rank movement, last 7 daysNot available
Commits, last 30 daysAhead of 0% of tracked repositories
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

bang-motion /

How it works

bang-motion

When your agent uses it

Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi web-nya — bahkan bila mereka tidak menyebut kata "motion graphic" secara eksplisit. Juga gunakan bila user mengeluh hasil animasi web "seperti PPT/presentasi" dan ingin lebih sinematik, atau ingin merender animasi web menjadi file video MP4, atau ingin explainer kartun/animasi dibangun LANGSUNG di After Effects lewat bridge/MCP Higgsfield.

What it loads into context

Frontmatter

300 tokens

Always available to the agent

SKILL.md

10,844 tokens

When the skill is activated

Reference documents

58,708 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Prasyarat — hanya browser
Player — tidak ada, autoplay, loop
Larangan struktural — uji PPT yang bisa diperiksa mekanis
Jenis pekerjaan yang dicakup
Explainer dan karakter: baca sebelum menentukan shot
Hukum #1 — Ini video, bukan slide
Hukum #2 — Deterministik atau mati
Hukum #3 — Gaya lahir dari tema, bukan dari starter, bukan dari referensi
Hukum #4 — Teks hidup, latar tunduk
Alur kerja
Checklist sebelum menyerahkan
Jebakan yang sudah memakan korban
After Effects — langsung lewat bridge Higgsfield
Isi paket

Scripts executed separately

scripts/ae/bridge/aset-svg.py
scripts/ae/bridge/package.json
scripts/ae/bridge/rig-tokoh.py
scripts/ae/bridge/svg2png.cjs
scripts/export-frames.mjs
scripts/kepala-ekspresi.py
scripts/serve.py
scripts/snap.mjs

Files

.claude-plugin/marketplace.jsonasset990 bytes
.claude-plugin/plugin.jsonasset780 bytes
CHANGELOG.mddoc2,544 bytes
LICENSEasset1,070 bytes
README.mddoc19,806 bytes
SKILL.mdcore39,343 bytes
SKILL.mdcore39,343 bytes
assets/starter-explainer-jurnalisme.htmlasset17,027 bytes
assets/starter-explainer-kartun.htmlasset17,035 bytes
assets/starter-explainer-katalog.htmlasset19,528 bytes
assets/starter-explainer-panggung.htmlasset20,733 bytes
assets/starter-explainer-sketsa.htmlasset17,302 bytes
assets/starter-explainer.htmlasset18,416 bytes
assets/starter-opener.htmlasset30,608 bytes
docs/gallery/01-grainy-gradient.jpgasset68,110 bytes
docs/gallery/02-kinetic-colorblock.jpgasset103,702 bytes
docs/gallery/03-saas-ui-tour.jpgasset75,925 bytes
docs/gallery/04-flat-vector.jpgasset66,235 bytes
docs/gallery/05-continuous-action.jpgasset76,637 bytes
docs/gallery/06-cartoon-stage.jpgasset50,357 bytes
docs/gallery/07-flat-pop-photo.jpgasset122,418 bytes
docs/gallery/08-white-catalog.jpgasset147,178 bytes
docs/gallery/09-visual-journalism.jpgasset208,575 bytes
docs/gallery/10-vintage-sketch.jpgasset238,104 bytes
docs/gallery/11-cartoon-collage.jpgasset189,115 bytes
docs/gallery/12-more-combinations.jpgasset133,048 bytes
docs/gallery/hero.jpgasset262,834 bytes
icon.pngasset178,102 bytes
icon.svgasset2,015 bytes
references/ae-bridge-higgsfield.mddoc11,812 bytes
references/anti-ppt.mddoc11,453 bytes
references/architecture.mddoc7,663 bytes
references/explainer.mddoc34,066 bytes
references/kartun-panggung.mddoc11,892 bytes
references/opener-konsep.mddoc58,022 bytes
references/roadmap.mddoc4,515 bytes
references/techniques.mddoc44,953 bytes
scripts/ae/bridge/aset-svg.pyruns5,978 bytes
scripts/ae/bridge/package.jsonruns272 bytes
scripts/ae/bridge/rig-tokoh.pyruns7,319 bytes
scripts/ae/bridge/svg2png.cjsruns1,074 bytes
scripts/export-frames.mjsruns2,677 bytes
scripts/kepala-ekspresi.pyruns4,399 bytes
scripts/serve.pyruns854 bytes
scripts/snap.mjsruns3,086 bytes
scripts/vo-pauses.htmlasset4,793 bytes

Read SKILL.md


# Bang Motion — motion graphic web yang bukan PPT

**v1.19.0 · by [Bang Tutorial](https://youtube.com/bangtutorial) · MIT.** Riwayat perubahan di `CHANGELOG.md`;
cara pasang di `README.md`.

Skill ini untuk AI coding agent apa pun (format Agent Skills terbuka).
Isinya hukum dan resep untuk motion graphic yang bergerak seperti video, bukan
presentasi — patuhi sebelum menulis kode.

## Prasyarat — hanya browser

Deliverable (`index.html`) hanya butuh browser modern + internet untuk CDN
(GSAP, font). Python dan Node **opsional**, dipakai hanya untuk alat kerja:
`scripts/serve.py` (server no-cache, cuma perlu bila memakai module lokal),

View the complete source on GitHub

Skills included

bang-motion

Repository facts

License: MIT
Created: Sep 5, 2026
Last pushed: Sep 15, 2026
Forks: 140
Open issues: 1
Project activity: Active

Rank over the last 12 weeks

Now #822 · best #822 · up 100 in 30 days

#904 on Nov 1
#883 on Nov 2
#870 on Nov 3
#837 on Nov 4
#827 on Nov 5
#822 since Nov 6

51 earlier periods

#887 on Aug 30
#876 on Sep 5
#911 on Sep 6
#934 on Sep 7
#946 on Sep 8
#933 on Sep 9
#929 on Sep 10
#895 on Sep 11
#891 from Sep 12 to Sep 13
#921 on Sep 14
#907 on Sep 15
#917 on Sep 16
#912 on Sep 17
#898 on Sep 18
#871 on Sep 19
#887 on Sep 20
#907 on Sep 21
#926 on Sep 22
#913 on Sep 23
#877 on Sep 24
#828 on Sep 25
#849 on Sep 26
#870 on Sep 27
#917 on Sep 28
#946 on Sep 29
#912 on Sep 30
#850 on Oct 1
#865 on Oct 2
#837 on Oct 3
#876 on Oct 4
#896 on Oct 5
#886 on Oct 6
#922 on Oct 7
#963 on Oct 8
#928 on Oct 9
#902 on Oct 10
#915 on Oct 11
#938 on Oct 12
#941 on Oct 13
#955 on Oct 14
#937 on Oct 15
#936 on Oct 16
#918 on Oct 17
#895 on Oct 18
#939 on Oct 19
#937 on Oct 20
#954 on Oct 21
#914 on Oct 22
#919 on Oct 23
#856 on Oct 24
#958 on Oct 31

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 1 note

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
122 network referencesin 17 files: assets/starter-opener.html:1 assets/starter-explainer-jurnalisme.html:1 assets/starter-explainer-kartun.html:1 and 14 more
No hidden or obfuscated text
No instruction overrides
8 executable scriptsin 8 files: scripts/ae/bridge/aset-svg.py:1 scripts/ae/bridge/package.json:1 scripts/ae/bridge/rig-tokoh.py:1 and 5 more
No access to secrets
No requests to vote in Hot

Show all 130 signals by file

`.claude-plugin/marketplace.json`

Network accessline 14

"author": {         "name": "Bang Tutorial",         "url": "https://youtube.com/bangtutorial"

Network accessline 15

"name": "Bang Tutorial",         "url": "https://youtube.com/bangtutorial"       },

Network accessline 16

"url": "https://youtube.com/bangtutorial"

Network accessline 17

},       "homepage": "https://github.com/bangtutorial/bang-motion",       "license": "MIT",

Network accessline 18

"homepage": "https://github.com/bangtutorial/bang-motion",

`.claude-plugin/plugin.json`

Network accessline 6

"author": {     "name": "Bang Tutorial",     "url": "https://youtube.com/bangtutorial"

Network accessline 7

"name": "Bang Tutorial",     "url": "https://youtube.com/bangtutorial"   },

Network accessline 8

"url": "https://youtube.com/bangtutorial"

Network accessline 9

},   "homepage": "https://github.com/bangtutorial/bang-motion",   "repository": "https://github.com/bangtutorial/bang-motion",

Network accessline 10

"homepage": "https://github.com/bangtutorial/bang-motion",

Network accessline 11

"repository": "https://github.com/bangtutorial/bang-motion",

`README.md`

Network accessline 10

[![Version](https://img.shields.io/badge/version-1.19.0-2f6fd6?style=flat-square)](CHANGELOG.md)

Network accessline 11

[![License: MIT](https://img.shields.io/badge/license-MIT-3fa34d?style=flat-square)](LICENSE)

Network accessline 12

[![Agent Skills](https://img.shields.io/badge/format-Agent%20Skills-1c2a4a?style=flat-square)](#install)

Network accessline 13

[![Works with](https://img.shields.io/badge/works%20with-Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20Gemini%20CLI%20%C2%B7%20Cursor-7a5af5?style=flat-square)](#install)

Network accessline 209

git clone https://github.com/bangtutorial/bang-motion

Network accessline 321

[MIT](LICENSE) © 2026 [Bang Tutorial](https://youtube.com/bangtutorial)

`SKILL.md`

Network accessline 5

metadata:   author: Bang Tutorial   author_url: https://youtube.com/bangtutorial

Network accessline 6

author: Bang Tutorial   author_url: https://youtube.com/bangtutorial   version: "1.19.0"

Network accessline 7

author_url: https://youtube.com/bangtutorial

Network accessline 8

version: "1.19.0"   updated: "2026-09-14"   homepage: https://github.com/bangtutorial/bang-motion

Network accessline 9

updated: "2026-09-14"   homepage: https://github.com/bangtutorial/bang-motion ---

Network accessline 10

homepage: https://github.com/bangtutorial/bang-motion

Network accessline 15

**v1.19.0 · by [Bang Tutorial](https://youtube.com/bangtutorial) · MIT.** Riwayat perubahan di `CHANGELOG.md`;

`assets/starter-explainer-jurnalisme.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 18

Ganti: aset (.cut), kalimat (.line dengan span.w per kata), label (.name), anotasi (.hand, svg.anno), tahun hantu (.ghost). --> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght

Network accessline 19

--> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> <style>

Network accessline 20

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 28

.w{display:inline-block;white-space:nowrap;margin:0 .1em;opacity:0;will-change:transform,opacity} .paper{position:absolute;inset:-1400px;background:var(--bg)} .grain{position:absolute;inset:-1400px;pointer-events:none;opacity:.14;mix-blend-

Network accessline 29

.paper{position:absolute;inset:-1400px;background:var(--bg)} .grain{position:absolute;inset:-1400px;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi

Network accessline 30

.grain{position:absolute;inset:-1400px;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence t

Network accessline 69

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 76

/* ---------- motion blur berarah (feGaussianBlur x/y terpisah) ---------- */ const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.i

Network accessline 77

const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;   f.setAttribute('x','-70%');f.setAttribute('y','-70%');f.setAttribute('

Network accessline 78

function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;

`assets/starter-explainer-kartun.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 18

Ganti: aset (.cut), kalimat (.line dengan span.w per kata), label (.name), anotasi (.hand, svg.anno), tahun hantu (.ghost). --> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=

Network accessline 19

--> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Caveat:wght@600;700&display=swap" rel="stylesheet"> <style>

Network accessline 20

<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Caveat:wght@600;700&display=swap" rel="stylesheet">

Network accessline 28

.w{display:inline-block;white-space:nowrap;margin:0 .1em;opacity:0;will-change:transform,opacity} .paper{position:absolute;inset:-1400px;background:var(--paper)} .grain{position:absolute;inset:-1400px;opacity:.28;mix-blend-mode:multiply;poi

Network accessline 29

.paper{position:absolute;inset:-1400px;background:var(--paper)} .grain{position:absolute;inset:-1400px;opacity:.28;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg

Network accessline 30

.grain{position:absolute;inset:-1400px;opacity:.28;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence

Network accessline 69

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 76

/* ---------- motion blur berarah (feGaussianBlur x/y terpisah) ---------- */ const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.i

Network accessline 77

const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;   f.setAttribute('x','-70%');f.setAttribute('y','-70%');f.setAttribute('

Network accessline 78

function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;

`assets/starter-explainer-katalog.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 20

.pnote catatan tangan, .cut.card kartu foto) + skala (.grid pengulangan) + label + coretan. Lihat explainer.md "Satu adegan = 3–5 elemen". --> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=Caveat:wght@600;

Network accessline 21

--> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=Caveat:wght@600;700&family=Inter:wght@500&display=swap" rel="stylesheet"> <style>

Network accessline 22

<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=Caveat:wght@600;700&family=Inter:wght@500&display=swap" rel="stylesheet">

Network accessline 83

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 90

/* ---------- motion blur berarah (feGaussianBlur x/y terpisah) ---------- */ const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.i

Network accessline 91

const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;   f.setAttribute('x','-70%');f.setAttribute('y','-70%');f.setAttribute('

Network accessline 92

function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;

`assets/starter-explainer-panggung.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.4.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.4.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.4.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 28

<div id="dbg"><button id="dPlay">Pause</button><input id="dScrub" type="range" min="0" max="1000" value="0"><span id="dClock">0.00s</span></div></div> <audio id="vo" src="" preload="auto"></audio> <script src="https://cdnjs.cloudflare.com/a

Network accessline 29

<audio id="vo" src="" preload="auto"></audio> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script>

Network accessline 30

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 31

<script> const $=(s,r=document)=>r.querySelector(s); const W=1920,H=1080,DUR=12,NS='http://www.w3.org/2000/svg',XL='http://www.w3.org/1999/xlink';

Network accessline 32

const $=(s,r=document)=>r.querySelector(s); const W=1920,H=1080,DUR=12,NS='http://www.w3.org/2000/svg',XL='http://www.w3.org/1999/xlink'; /* palet flat cerah — ganti dari tema, tapi tetap TANPA tekstur */

Network accessline 33

const W=1920,H=1080,DUR=12,NS='http://www.w3.org/2000/svg',XL='http://www.w3.org/1999/xlink';

`assets/starter-explainer-sketsa.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 18

Ganti: aset (.cut), kalimat (.line dengan span.w per kata), label (.name), anotasi (.hand, svg.anno), tahun hantu (.ghost). --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=EB+Gara

Network accessline 19

--> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel:wght@600;700&display=swap" rel="stylesheet"> <style>

Network accessline 20

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">

Network accessline 27

.t{position:absolute;opacity:0} .w{display:inline-block;white-space:nowrap;margin:0 .1em;opacity:0;will-change:transform,opacity} .paper{position:absolute;inset:-1400px;background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg

Network accessline 28

.w{display:inline-block;white-space:nowrap;margin:0 .1em;opacity:0;will-change:transform,opacity} .paper{position:absolute;inset:-1400px;background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s

Network accessline 29

.paper{position:absolute;inset:-1400px;background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequenc

Network accessline 67

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 74

/* ---------- motion blur berarah (feGaussianBlur x/y terpisah) ---------- */ const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.i

Network accessline 75

const defs=$('#filters defs');let fc=0; function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;   f.setAttribute('x','-70%');f.setAttribute('y','-70%');f.setAttribute('

Network accessline 76

function makeBlur(){const id='mb'+(fc++),NS='http://www.w3.org/2000/svg';const f=document.createElementNS(NS,'filter');f.id=id;

`assets/starter-explainer.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 23

Buka dengan klik dua kali. Hanya butuh browser + internet (GSAP & font dari CDN). --> <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@900&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">

Network accessline 24

--> <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@900&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet"> <style>

Network accessline 25

<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@900&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">

Network accessline 74

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Network accessline 75

<script> const W=1920,H=1080,DUR=22; const $=s=>document.querySelector(s), NS='http://www.w3.org/2000/svg';

Network accessline 76

const W=1920,H=1080,DUR=22; const $=s=>document.querySelector(s), NS='http://www.w3.org/2000/svg'; function S(tag,attrs={},parent){const e=document.createElementNS(NS,tag);for(const k in attrs)e.setAttribute(k,attrs[k]);if(parent)parent.app

Network accessline 77

const $=s=>document.querySelector(s), NS='http://www.w3.org/2000/svg';

`assets/starter-opener.html`

Network accessline 1

<!doctype html> <html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 2

<html lang="id"> <!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion --> <head>

Network accessline 3

<!-- Made with the Bang Motion skill v1.0.0 by Bang Tutorial (https://youtube.com/bangtutorial) - MIT - https://github.com/bangtutorial/bang-motion -->

Network accessline 36

Jangan meniru kulit video referensi dan jangan membuka proyek lama. --> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 37

--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 38

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 39

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 40

<!-- GANTI: font display sesuai style brief, mis. https://fonts.googleapis.com/css2?family=NAMA+FONT:wght@700;900&display=swap -->

Network accessline 41

<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&display=swap" rel="stylesheet">

Network accessline 42

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Network accessline 43

<script type="importmap"> {"imports":{   "three":"https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js",

Network accessline 44

{"imports":{   "three":"https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js",   "three/addons/":"https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/"

Network accessline 45

"three":"https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js",

Network accessline 46

"three/addons/":"https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/"

Network accessline 174

const defs=$('#filters defs'); let fc=0; function makeBlur(){ // feGaussianBlur dgn stdDeviation x/y terpisah = blur SEARAH gerak   const id='mb'+(fc++), NS='http://www.w3.org/2000/svg';

Network accessline 175

function makeBlur(){ // feGaussianBlur dgn stdDeviation x/y terpisah = blur SEARAH gerak   const id='mb'+(fc++), NS='http://www.w3.org/2000/svg';   const f=document.createElementNS(NS,'filter'); f.id=id;

Network accessline 176

const id='mb'+(fc++), NS='http://www.w3.org/2000/svg';

`icon.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

`references/ae-bridge-higgsfield.md`

Network accessline 18

| `ae_apply_gradient` Gradient Ramp 2 stop / 4-Color pada shape statis (langit) | Gradient di layer berkeyframe; gradient di dalam batch | | `set_expression` pada Position/Scale/Rotation/Opacity/Anchor | Expression pada properti efek atau p

Network accessline 19

| `set_expression` pada Position/Scale/Rotation/Opacity/Anchor | Expression pada properti efek atau path; `ae_reorder_layers` selalu "layer not found" → **urutan tumpuk = urutan pembuatan**, buat dari belakang ke depan | | `ae_export_contac

Network accessline 20

| `ae_export_contact_sheet` (5–8 waktu) dan `ae_export_frame` → URL r2.dev | Melihat URL r2.dev dari Indonesia (diblokir) → relay: `media_import_url(url)` di MCP Higgsfield → `curl https://d2ol7oe51mr4n9.cloudfront.net/<user>/<media_id>.png

`references/architecture.md`

Network accessline 175

- Aset lokal (ikon, gambar) cukup path relatif — `<img src="icon.png">`   aman di `file://`. - Hindari `fetch()`/XHR ke berkas lokal — itu diblokir di `file://`.

Network accessline 176

aman di `file://`. - Hindari `fetch()`/XHR ke berkas lokal — itu diblokir di `file://`. - Node/puppeteer hanya untuk render MP4; jangan sampai user mengira opener

Network accessline 177

- Hindari `fetch()`/XHR ke berkas lokal — itu diblokir di `file://`.

`scripts/ae/bridge/aset-svg.py`

Executable scriptline 1
```
Executable file
```

Network accessline 55

x0, y0 = math.floor(sh.minx - m), math.floor(sh.miny - m); w, h = math.ceil(sh.maxx + m) - x0, math.ceil(sh.maxy + m) - y0     fn = f"{panggung.split()[0]}_{name.replace(' ', '-')}.svg"     svg = f'<svg xmlns="http://www.w3.org/2000/svg" wi

Network accessline 56

fn = f"{panggung.split()[0]}_{name.replace(' ', '-')}.svg"     svg = f'<svg xmlns="http://www.w3.org/2000/svg" width="{w*PX}" height="{h*PX}" viewBox="{x0} {y0} {w} {h}">' + ''.join(sh.items) + '</svg>'     open(os.path.join(OUT, fn), 'w',

Network accessline 57

svg = f'<svg xmlns="http://www.w3.org/2000/svg" width="{w*PX}" height="{h*PX}" viewBox="{x0} {y0} {w} {h}">' + ''.join(sh.items) + '</svg>'

`scripts/ae/bridge/package.json`

Executable scriptline 1
```
Executable file
```

`scripts/ae/bridge/rig-tokoh.py`

Executable scriptline 1
```
Executable file
```

`scripts/ae/bridge/svg2png.cjs`

Executable scriptline 1
```
Executable file
```

`scripts/export-frames.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 20

const URL   = process.env.URL   || 'http://127.0.0.1:5178/index.html?clean=1';

`scripts/kepala-ekspresi.py`

Executable scriptline 1
```
Executable file
```

`scripts/serve.py`

Executable scriptline 1
```
Executable file
```

Network accessline 22

if __name__ == '__main__':     print(f'serving on http://127.0.0.1:{PORT} (no-store)')

Network accessline 23

print(f'serving on http://127.0.0.1:{PORT} (no-store)')

`scripts/snap.mjs`

Executable scriptline 1
```
Executable file
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 1 fact

Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionscripts/ae/bridge/aset-svg.py:57High confidence

Signal confidence: 33 facts

Network access in prose of documentationREADME.md:10Low confidence
Network access in prose of documentationREADME.md:11Low confidence
Network access in prose of documentationREADME.md:12Low confidence
Network access in prose of documentationREADME.md:13Low confidence
Network access in code of documentationREADME.md:209Low confidence
Network access in prose of documentationREADME.md:321Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:5Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:6Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:7Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:8Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:9Low confidence
Network access in the frontmatter of the SKILL.mdSKILL.md:10Low confidence
Network access in prose of the SKILL.mdSKILL.md:15Low confidence
Network access in prose of documentationreferences/ae-bridge-higgsfield.md:18Low confidence
Network access in prose of documentationreferences/ae-bridge-higgsfield.md:19Low confidence
Network access in prose of documentationreferences/ae-bridge-higgsfield.md:20Low confidence
Network access in prose of documentationreferences/architecture.md:175Low confidence
Network access in prose of documentationreferences/architecture.md:176Low confidence
Network access in prose of documentationreferences/architecture.md:177Low confidence
Executable script in prose of a file that runsscripts/ae/bridge/aset-svg.py:1Low confidence
Network access in code of a file that runsscripts/ae/bridge/aset-svg.py:55High confidence
Network access in code of a file that runsscripts/ae/bridge/aset-svg.py:56High confidence
Network access in code of a file that runsscripts/ae/bridge/aset-svg.py:57High confidence
Executable script in code of a file that runsscripts/ae/bridge/package.json:1High confidence
Executable script in prose of a file that runsscripts/ae/bridge/rig-tokoh.py:1Low confidence
Executable script in a comment of a file that runsscripts/ae/bridge/svg2png.cjs:1Low confidence
Executable script in a comment of a file that runsscripts/export-frames.mjs:1Low confidence
Network access in code of a file that runsscripts/export-frames.mjs:20High confidence
Executable script in prose of a file that runsscripts/kepala-ekspresi.py:1Low confidence
Executable script in prose of a file that runsscripts/serve.py:1Low confidence
Network access in code of a file that runsscripts/serve.py:22High confidence
Network access in code of a file that runsscripts/serve.py:23High confidence
Executable script in a comment of a file that runsscripts/snap.mjs:1Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

[![bangtutorial/bang-motion on hotskills](https://hotskills.dev/badge/bangtutorial-bang-motion.svg)](https://hotskills.dev/skill/bangtutorial-bang-motion/)

bangtutorial/bang-motion

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

bang-motion

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

.claude-plugin/marketplace.json

.claude-plugin/plugin.json

README.md

SKILL.md

assets/starter-explainer-jurnalisme.html

assets/starter-explainer-kartun.html

assets/starter-explainer-katalog.html

assets/starter-explainer-panggung.html

assets/starter-explainer-sketsa.html

assets/starter-explainer.html

assets/starter-opener.html

icon.svg

references/ae-bridge-higgsfield.md

references/architecture.md

scripts/ae/bridge/aset-svg.py

scripts/ae/bridge/package.json

scripts/ae/bridge/rig-tokoh.py

scripts/ae/bridge/svg2png.cjs

scripts/export-frames.mjs

scripts/kepala-ekspresi.py

scripts/serve.py

scripts/snap.mjs

How the signals fit together

Works with

You might also use

nextlevelbuilder/ui-ux-pro-max-skill

Leonxlnx/taste-skill

nexu-io/open-design

pbakaus/impeccable

asgeirtj/system_prompts_leaks

Nutlope/hallmark

Explore alternatives and comparisons

Add this badge to your README

`SKILL.md`

`.claude-plugin/marketplace.json`

`.claude-plugin/plugin.json`

`README.md`

`SKILL.md`

`assets/starter-explainer-jurnalisme.html`

`assets/starter-explainer-kartun.html`

`assets/starter-explainer-katalog.html`

`assets/starter-explainer-panggung.html`

`assets/starter-explainer-sketsa.html`

`assets/starter-explainer.html`

`assets/starter-opener.html`

`icon.svg`

`references/ae-bridge-higgsfield.md`

`references/architecture.md`

`scripts/ae/bridge/aset-svg.py`

`scripts/ae/bridge/package.json`

`scripts/ae/bridge/rig-tokoh.py`

`scripts/ae/bridge/svg2png.cjs`

`scripts/export-frames.mjs`

`scripts/kepala-ekspresi.py`

`scripts/serve.py`

`scripts/snap.mjs`