Zangetsu Studio

Fan-made anime universes, each told as one scroll-driven story. The first is Bleach: Ichigo's arc in seven chapters, from the night Rukia lends him her blade to the night he spends it all and can no longer see her. It's built entirely from Tite Kubo's own art, chapter covers and manga panels, run through a single ink pass. Every scroll scene is a story beat, and the prologue's moon pays off in the last chapter, 無月: no moon. Dragon Ball, Naruto, One Piece and Jujutsu Kaisen are on the drawing board.

No framework, no build step, no dependencies to install. Serve the folder and it runs.

Live: sayandeep1013.github.io/ZangetsuStudio

Home — pick a universe	The universe accordion

Ch. 01 — the blade falls, the Hollow surfaces	Ch. 02 — the slash cuts the page in two

Ch. 03 — Kenpachi only came to fight	Ch. 04 — the Gotei Thirteen deck fans out

Ch. 04 — one captain gets stamped	Ch. 05 — the torn edge drags the Hollow across

Ch. 06 — the halves slam together	Ch. 07 — a manga page assembles itself

Ch. 07 — ink floods it: 無月, no moon	Ch. 07 — Goodbye, Rukia

The storyboard	Epilogue — who drew it

From the archive — a random handful every visit	A universe still in production

On a phone

• Scroll is the camera. Each chapter is a full-screen section pinned by ScrollTrigger for two to three screens of scroll. One scrubbed timeline per chapter runs its beat: the fall, the cut, the slam, the reveal. Lenis smooths the wheel and feeds ScrollTrigger from GSAP's ticker, so both run on one clock.
• The art is real ink, not drawn in code. Every figure is a Kubo chapter cover from the Bleach Wiki, passed through tools/ink.py: greyscale, levels crushed to solid black and paper, and saturated reds kept as the one brand red. Line-heavy art can be flipped to white-on-black for the dark chapters.
• Blends are baked, not live. Art that sits on flat red is rendered onto red by ink.py --paper, so no full-screen mix-blend-mode has to be recomposited every frame.
• Randomness on purpose. 28 extra manga panels sit in one shuffled bag. Each visit draws from it for the loader, the marquee strips, two extra gallery panels, the taped stickers in the archive and the footer. Nothing repeats until the bag is empty, and no two visits look quite the same.
• The story drives the page. Each chapter section carries data-chapter and data-title, and a HUD under the nav reads them as you pass. The chapters, their art and their scroll moments are mapped in bleach/STORY.md.
• Slots for motion. Any data-scene can take a video or a still: tools/make-frames.mjs turns a clip into WebP frames that scrub on a canvas with the chapter's pin, and the drawn placeholder hides itself.

// a chapter is one pinned, scrubbed timeline
gsap.timeline({ scrollTrigger: { trigger: '#versus', start: 'top top', end: '+=180%', scrub: 1, pin: true } })
  .to('.vs-half.l, .vs-half.r', { xPercent: 0, duration: 0.6, ease: 'power4.in' }, 0)   // slam
  .fromTo('.vs-flash', { opacity: 0 }, { opacity: 1, duration: 0.05 }, 0.6)            // impact frame
  .fromTo('.vs-word span', { scale: 4, opacity: 0 }, { scale: 1, opacity: 1, stagger: 0.1 }, 0.7);

Each universe swaps the accent and the art. The ink, paper and type stay, so the studio reads as one house.

index.html                universe picker (home)
shared/
  home.css, home.js       the hub: accordion, intro, colour-matched exit wipe
  soon.css                the coming-soon page every unbuilt universe uses
  vendor/                 gsap, ScrollTrigger, lenis
bleach/
  index.html              the seven chapters
  css/style.css           the whole Bleach design system
  js/main.js              one pinned timeline per chapter, HUD, marquees, media slots
  assets/art/*.webp       ink-treated chapter art
  assets/art/ch7/         Chapter 07's manga panels (419–423)
  assets/art/scatter/     28 random panels for the archive, loader, marquees and gallery
  assets/src/             the original covers and panels ink.py starts from (not deployed)
  assets/scenes.json      optional video / still slots
  STORY.md                chapter ↔ section ↔ art ↔ scroll moment
dragonball/ naruto/ onepiece/ jujutsukaisen/   coming soon
tools/
  ink.py                  the ink treatment
  make-frames.mjs         clip → scrubbed WebP frames, or still → slot image
screenshots/readme/       the images in this file
.github/workflows/        Pages deploy

1. Copy bleach/ over its folder. That replaces the coming-soon page.
2. Write its STORY.md first: a prologue, the chapters, and the payoff.
3. Ink its art with tools/ink.py, set the accent in css/style.css, and rewrite the sections and timelines.
4. Flip its card on the home page from In production to live.

Any static server works. There is nothing to build.

python -m http.server 5173    # → http://localhost:5173

The pages fetch assets/scenes.json, so serve the folder rather than opening the files from disk.

Asset tools:

python tools/ink.py bleach/assets/src/ch311.png bleach/assets/art/hero.webp --crop 0.05,0.01,0.97,0.9 --invert
python tools/ink.py bleach/assets/src/ch266.png bleach/assets/art/frame.webp --crop 0,0.09,1,1 --paper "#c8102e"
node tools/make-frames.mjs clip.mp4 hero --universe bleach    # video → scroll-scrubbed frames

• Chapter 07, rebuilt. The first version was a crescent sweeping across a single image, and it neither looked good nor finished the story. It's now the arc's real ending, told in three beats from chapters 419–423. The ink flood is drawn on a half-resolution canvas: the first version used a 120-point clip-path that repainted the whole screen each frame, at 128fps with 9 frames over 25ms; the canvas runs at 142fps with none. The 無月 reveal slides an ink cover with transform rather than animating clip-path on giant glyphs. Rukia's dissolve erases 3px blocks of a canvas, bottom first, the way the panel in chapter 423 draws it.
• Performance. The chapters after Hueco Mundo used to stutter on first view. A trace found the two kanji marquees reading scrollWidth inside the frame loop, forcing a layout every frame and making Lenis and ScrollTrigger's own reads expensive. Width is now measured once, off-screen marquees don't tick, and forced-reflow time fell from 353ms to 134ms over the same scroll. Blur reveals became scale reveals, and the torn edge's per-frame drop-shadow became a second, wider polyline. First-view frame rate after the fixes: Hueco Mundo 118 → 143fps with no slow frames.
• Inverting ink. Only line-heavy art on white survives inversion. Ulquiorra's winged "The Wrath" cover turned into a white silhouette, because its large black masses became large white ones, so the hero uses ch. 311 instead.
• Clipped display type. Masked headline lines (overflow: hidden for the rise-in) clip the top of condensed caps at tight line-heights. Each .line carries padding-top: .14em with a matching negative margin, so nothing is cut and the rhythm doesn't change.
• Pins and from(). A from() tween inside a timeline with invalidateOnRefresh re-records its hidden start state as the end state after a resize. Chapter timelines use explicit fromTo().

MIT for the code. All characters and artwork belong to their creators: Bleach © Tite Kubo / Shueisha. The art is used here for a non-commercial fan project and is not covered by the MIT licence. Fonts are under the OFL. GSAP is under its standard licence and Lenis under MIT.