Cut-out Breakout Zoom

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the section anywhere in your <body>:

In your downloadThe working code for this step, in index.html.

What the effect needs from your markup: .cbz as the root, .cbz-stage inside it, and inside that .cbz-plate, .cbz-headline and .cbz-figure. Each image in .cbz-figure is one frame of the turn, in order: the first is the one she opens and lands on, and the only one shown without the scrub. A single image is also valid, and she then comes forward with no spin. .cbz-payoff is optional, and each of its direct children rises in turn. Everything is looked up inside the root, so you can repeat the section on one page with different pictures, words and settings. The headline can be any heading level. Its text is split into letters by the script, and the real text stays in place, visually hidden, so the accessible name does not change.

What is only the demo's styling: the Anybody typeface, the navy and warm white (--cbz-ground, --cbz-ink), the type sizes and the corner radius.

CSS the effect depends on: keep the .cbz-canvas and .is-live rules, the stage height and overflow: hidden, container-type: size on the stage (the shared frame is sized from it), the frame variables and rules on .cbz-figure and .cbz-media, the z-index order, and the .has-js block at the end of the stylesheet. That block is the start state and is what stops the page flashing the finished layout. The base rules without it are the static layout that no-JS and reduced-motion visitors see.

Swapping the picture

The plate takes any image or video, and the frames take images. The plate can be a muted looping video in one line:

In your downloadThe working code for this step, in index.html.

The script reads the picture's shape from the file, or from width and height until it has loaded, so always set both.

Making a plate and a cut-out from any photograph

You need two files with exactly the same pixel dimensions.

1. Cut-out layer. Lift the subject with macOS Vision (in Photos or Preview, or the VNGenerateForegroundInstanceMaskRequest API) or a background remover. Keep the full canvas with transparency around the subject. Do not crop to the subject. Export WebP or PNG with alpha.
2. Plate. The same photograph with the subject removed, using generative fill or a clone tool. A plain backdrop can simply be regenerated at the same size.
3. Clean the edge. A photograph leaves a thin rim of its old background on the subject, and it shows as soon as she crosses the headline or the dark ground. Choke the mask by a pixel or two and remove the colour spill. View it at 2x over white and over your stage colour.

Why they must share one frame size: at the end of the scrub both layers sit at 1:1 in one shared frame and crop the same way, so the subject lands exactly where she stands in the photograph. If the sizes differ, she floats away from her own contact shadow, floor or surroundings on the last frame.

Subjects standing on something. Below a 3:2 screen shape the cut-out's frame is smaller than the plate's, through --cbz-figure-h, so she settles higher and leaves room for the payoff. That suits a subject in the air on a plain backdrop. If yours stands on a floor in the plate, set --cbz-figure-h: var(--cbz-frame-h) on .cbz for those shapes and place the payoff yourself.

Tell the effect where she is. data-cbz-subject gives her bounding box in the picture as fractions of its width and height. The starting scale, the card and the turning point are all worked out from it. Measure it in any image editor.

Making a turn

A turn is a set of stills of one subject, one revolution, in order, starting and ending on the same pose. Twelve frames, about 30 degrees apart, read close to video, and six also work as a harder stop-motion cut. All frames together are the page weight of the effect, so keep each to about 70 KB.

• Same frame, same subject. Every frame has the same pixel dimensions, the same framing and the same distance to camera. Lock the camera, and have the subject turn on a mark. Keep the same backdrop so that the cut-outs clean up the same way.
• Generating frames. Give the image model your front frame as the reference and ask for the same person, same clothes, same light and same framing, with only the angle changed. Reject any frame where the proportions drift, and check hands and feet at full size.
• Cut each frame out the same way. Follow the steps above and keep the transparent canvas at full size. If one frame's edge is cleaner than the rest, the difference shows when you cut between them.

Measuring the offsets

No two frames put her hips in the same place, so she would jitter sideways. data-cbz-offset on each frame moves it into line with the first.

1. Open the frames as layers in any image editor. In each one, note the centre of the waistband in pixels, and where the skirt's mass is centred. A large skirt counts: a blend of about two thirds waist and one third skirt works better than the waist alone.
2. For each frame, take the first frame's point minus this frame's point, and divide by the frame size: x = (frontX - thisX) / frameWidth, y = (frontY - thisY) / frameHeight.
3. Write the pair on the frame, for example data-cbz-offset="0.0114 -0.0043". The first frame needs none.
4. Check it: scroll slowly through every cut at full size and watch her hips. They should hold still while everything else changes.

Offsets are fractions of the frame, so they hold at every screen size.

The silk

A small WebGL canvas draws the visible frame and moves the skirt. There is nothing to wire up: it uses the frames you supplied.

• What moves. A low-frequency ripple travels around the skirt, in the picture's own pixels: about 2.5 at rest and up to about 6 at full scroll speed. It moves colour and edge together, so the hem itself moves. Just before each cut, the skirt's sheen starts to carry over to the next frame, but its outline stays this frame's, so a hem can never double or go see-through.
• What never moves. Everything above the waist and at the feet is exactly as photographed. data-cbz-silk-zone says where that is, as fractions of the frame: the waist line, the line just above the feet, and the hips' axis. Check yours by setting data-cbz-silk-amp="24" and scrolling to the end: the ripple should reach the skirt and nothing else.
• Your frames must be same-origin, or served with CORS headers and crossorigin="anonymous" on each image. If the browser will not hand the pixels over, the plain images stay in charge.
• Other subjects. It suits loose cloth, hair or water. On something rigid, turn it off with data-cbz-silk="off".

Fallback

The images stay in the stack, and keep cutting underneath the canvas. Until the canvas is live they are what you see, and the first frame looks the same in both. With no WebGL, or if the context is lost, you get hard cuts through the same frames, with nothing else changing. If the context comes back, the silk does too. Reduced motion shows the first frame alone, with no canvas.

Choosing the crop

Both layers crop together through two variables on .cbz, as fractions from 0 to 1. For example, to keep her in shot on phones:

In your downloadThe working code for this step, in style.css.

Attribute	Values	Default	Description
data-cbz-distance	Number	2.8	Pin length in viewport heights. Touch screens use 72% of this.
data-cbz-scrub	Seconds, 0 or more	1	How long the animation takes to catch up with the scroll.
data-cbz-turns	Whole number	2	Full revolutions through the frames. 0 holds the first frame.
data-cbz-sway	Degrees	4	Her whole-body lean in the first frame, and the rotation that carries her between cuts. 0 turns it off.
data-cbz-silk	on, off	on	The WebGL silk. off keeps plain images with hard cuts.
data-cbz-silk-amp	Source pixels	2.5	The ripple at rest. It reaches 2.4 times this at full scroll speed. 0 holds still.
data-cbz-silk-blend	0 to 1	0.35	The last share of each frame's interval in which the sheen carries to the next. 0 turns it off.
data-cbz-silk-zone	waist feet axis	0.41 0.82 0.48	Where the silk lives, as fractions of the frame. Nothing above the waist line or below the feet line ever moves.
data-cbz-offset	x y, on a frame	none	Moves that frame into line with the first, as fractions of the frame. See Measuring the offsets.
data-cbz-subject	left top width height	0.218 0.012 0.567 0.916	The subject's bounding box in the first frame, as fractions.
data-cbz-fill	0 to 1	0.74	How much of the stage height she fills in the first frame.

• Reduced motion: a static layout with no pin, on the first frame only. The other frames are not downloaded. The picture fills the screen and the headline and payoff are placed clear of the subject. If the preference changes while the page is open, the section switches over and restores itself.
• No JavaScript or a blocked CDN: the same static layout.
• Headline: stays a real heading with its full text. The split letters are aria-hidden.
• Images: give the first frame useful alt text, and leave the plate's and the other frames' alt empty.
• Contrast: the payoff text clears 4.5:1 on the plate in the demo at each screen shape, with no scrim, and the spin has landed before it appears. Check it again with your own picture.
• Motion: the ripple keeps breathing while the section is on screen, and stops when it is off screen. It never runs under reduced motion.
• Touch: a shorter pin. On portrait screens she fills the width, the headline stacks on two lines behind her, and she settles higher so the payoff sits clear below her.

One canvas, one draw call a frame, only while the section is on screen. Twelve frames at 1672x941 hold about 75 MB of graphics memory per copy on the page, so if you repeat the section, use fewer frames or data-cbz-silk="off" on later copies. Canvas resolution follows the display, capped at 2x. Frames upload one per paint, before the pin begins, and everything is released on revert().

GSAP owns the pin, the scrub and matchMedia. The canvas runs on raw WebGL with no library, reading scroll velocity for the ripple, and uses the GSAP ticker as its clock.

Required:

• GSAP 3.12+
• ScrollTrigger plugin

Optional:

• WebGL, for the silk

The demo is pinned to GSAP 3.15.0. Size-container units (cqw, cqh) need a browser from 2023 or later.