Kiteframe

Demo · not for sale

Fictional product · portfolio demo

Catch layout animation before it ships.

Kiteframe is an invented profiler that fails CI when motion touches layout. It is not a real product; this page is the proof of the gate around it.

Read a sample report
Diagram of a kite-shaped graph on a dark grid, invented artwork for the Kiteframe demo.

How a fictional check works

  1. 01 · Record

    Watch the timeline, not the screenshot.

    Kiteframe (fictional) samples which properties actually move. Transform and opacity are allowed. Geometry that forces layout is not.

  2. 02 · Diff

    Budgets live in one file.

    LCP, CLS, TBT, and script bytes are numbers a pull request can fail. This section uses CSS scroll-driven transform and opacity, not layout.

  3. 03 · Gate

    CI is the design review.

    If a keyframe animates left or width, the check is red. That is the product idea, invented so this repo has something honest to launch.

Numbers the gate will keep

Figures come from performance-budgets.json. The CI LCP gate is simulated-throttle; the product target is stricter. Count-up is a GSAP timeline loaded only when this block is in view.

LCP gate (CI, simulated)
2.5s
LCP target
2.0s
CLS ceiling
0.02
Initial JS, gzipped
170KB

Invented teams on the waitlist

Names and marks are fake. The strip loops with transform only; hover pauses it.

  • Helio Batch
  • Northrail Labs
  • Quillhop
  • Ampere Desk
  • Foldline
  • Sable Park

A sample report

Characters fade in with opacity after this block is on screen. Width never animates, so the motion lint stays green.

kiteframe 0.0.0-demo (fictional)

$ kiteframe check src/app

  pass   transform    14 tweens
  pass   opacity       6 fades
  fail   left          HeroCta  (layout)

  budgets  LCP 2.0s  CLS 0.02  TBT 150ms
  result   1 failed  ·  not a real product