MOTION CHEAT CODE · FREE STARTER KIT
UI MOTION · 3 OF THE 36 ANIMATIONS

Clean website and product animations. Each folder is two things at once:
  1. a 4:5 video slide (1080x1350, 7 seconds) for Instagram carousels, a HyperFrames project (index.html)
  2. the same animation as a section for a website (web.html: open it in a browser)

IN THIS KIT
  u01  Headline Focus   The first screen of a landing page.
  u05  Metric Tiles     A product dashboard, at a glance.
  u25  Add to Cart      Product pages and online shops.

WHAT YOU NEED
- Video slide: a Mac or Windows computer with Node.js 22 or newer and FFmpeg. To change it with a prompt: a paid
  Claude plan that includes Claude Code (Pro or higher). Only a phone? The full pack has a phone setup.
- Website version: nothing. web.html opens in any browser; the comment at the top says what to copy.

RENDER A VIDEO SLIDE  (in a terminal, inside one of the folders)
    npx hyperframes browser ensure                    once: downloads the Chrome HyperFrames renders with
    npx hyperframes render -o renders/slide.mp4

CHANGE IT WITH A PROMPT  (open the folder in Claude Code and paste)
  u01 Headline Focus:
    Change the headline to "Bread that|sells out|*before noon.*", the brand to "Zonnehoek",
    the accent to #2F5BFF and the site to @zonnehoek, then render to renders/mine.mp4.

  u05 Metric Tiles:
    Change the revenue to 91200 with the label "Orders" and no currency, the goal to 85, the
    bars to "20, 35, 30, 55, 70, 62, 90" and the accent to #2F5BFF, then render to
    renders/mine.mp4.

  u25 Add to Cart:
    Rename the shop to "Kestrel", the product to "Field Tote", the price to "$54", the
    product colour to #3F4A3C and the accent to #2F5BFF, then render to renders/mine.mp4.

  The variables (every text, number and colour) are listed in each RECIPE.md. Defaults are example data and
  invented names: use your real numbers.

ON YOUR WEBSITE
  Open web.html in a browser. Copy the <style> block, the <section class="uim" ...> and the three <script> tags into
  your page. Your own texts go in data-vars on the section. It plays when it scrolls into view; visitors who ask
  their device for less motion see the finished state.

FILES IN EACH FOLDER
  index.html        the video slide (HTML + one GSAP timeline)
  web.html          the website version
  RECIPE.md         how it is built, all variables, 3 remix prompts
  anim.js, anim.css the animation itself (shared by both versions)
  frame.js, uim.css, web.js   the slide frame, the STUDIO look and the web player
  gsap.min.js       GSAP 3.14.2 (GreenSock, https://gsap.com/standard-license)
  fonts/            Inter and JetBrains Mono (SIL Open Font License, texts included)
  hyperframes.json, package.json, meta.json      HyperFrames project files

WANT THE REST?
  The full Motion Cheat Code pack has all 36 UI Motion animations, 250 prompts, 60 templates, 400 sound
  effects, 30 music tracks and more. $49 one-time: https://motioncheatcode.com/?src=free-kit

Motion Cheat Code is an independent product by NorthByte (Franeker, the Netherlands). Not
affiliated with or endorsed by Anthropic or HeyGen. Claude and Claude Code are trademarks of
Anthropic, PBC. HyperFrames is open-source software by HeyGen (Apache-2.0).
Questions: support@motioncheatcode.com
