Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

PalateKit Pick

Headline That Flips Tile by Tile v1.0.0

Use this resource to reveal a second headline with a tile-flip effect

New

  • 523 downloads
  • 189 likes
  • 197 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install tile-flip-headline-reveal

First time: connect the CLI with

npx --yes palatekit@latest login

The agent sets the two headlines, the sweep direction, tile size, depth and shadows. Only the tiles touching the letters flip over, with a slight bounce. You get an 8 second sequence ideal for a launch hook or a slogan.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (npx hyperframes)
  • Node.js
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide for the block
  • code-slice-hero.html, surface.js and shadows.js: the WebGL scene and its 18 variables
  • assets/: Geist Bold font, GSAP and their license notices
  • SKILL.md: variables table and editing rules

Good fit for

  • Announcing a two-part slogan ("MAKE IT" then "MATTER.")
  • Opening a product or website launch video
  • Creating a graphic title sequence for a brand

Not for

  • Headlines longer than 32 characters
  • Rendering on a machine without WebGL 2

Tags

  • title
  • tiles
  • webgl
  • reveal

About

You say

"Create a hook where the headline "BEFORE" flips into "AFTER" tile by tile, sweeping left to right, on a very dark grey background."

Grid of dark square tiles flipping over to switch from one headline to another.

Block published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
The front and rear headlines (32 characters max each) and A background color (optional)
Dependencies
HyperFrames (npx hyperframes) and Node.js

How to use it

  1. Install the block with npx hyperframes add code-slice-hero.
  2. Ask the agent to set the variables: headline, reverseHeadline, direction, cellSize, behindColor.
  3. Run the render with the command from SKILL.md and your variables as JSON.

Content preview

Files

  • assets/Geist-Bold.ttf65 KB
  • assets/Geist-OFL.txt4.3 KB
  • assets/gsap-3.14.2.min.js128.2 KB
  • assets/GSAP-NOTICE.txt0.1 KB
  • code-slice-hero.html23.9 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1.2 KB
  • registry-item.json1.9 KB
  • shadows.js9.7 KB
  • SKILL.md4.7 KB
  • surface.js7.6 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/code-slice-hero
Licence
Apache-2.0

Notice

Version modifiée de « Code Slice Hero » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is an internet connection needed?

No. The Geist font, GSAP and the scripts ship in the folder.

Which licenses apply to the bundled files?

The block is Apache-2.0, the Geist font is under the OFL and GSAP under its Standard license (see assets/).