▥hyperframes

A LITTLE CODE. A LOT OF MOTION.

Tiny scenes. Real motion.

Turn HTML & CSS into a video, right here in your browser.

100% local · No uploads

01Scene editor

● scene.html HTML + CSS

<style>
.scene { width:640px; height:360px; overflow:hidden;
  position:relative; background:#c7f276; color:#172410;
  font-family:Arial,sans-serif; }
.title { position:absolute; left:36px; top:42px;
  font-size:64px; font-weight:700; line-height:.95;
  letter-spacing:-4px; }
.caption { position:absolute; left:39px; bottom:30px;
  font-size:11px; letter-spacing:2px; }
.orbit { position:absolute; width:250px; height:250px;
  right:32px; top:55px; border:1px solid #688a42;
  border-radius:50%; animation:spin 3s linear infinite; }
.orbit::before { content:""; position:absolute;
  width:55px; height:55px; top:10px; left:12px;
  background:#23351b; border-radius:50%; }
.core { position:absolute; width:115px; height:115px;
  right:100px; top:123px; border-radius:50%;
  background:#f0ffce; box-shadow:0 0 0 22px #b5df68;
  animation:breathe 1.5s ease-in-out infinite alternate; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { to { transform:scale(.72); } }
</style>
<div class="scene">
  <div class="title">Stay<br>in orbit.</div>
  <div class="caption">MOTION STUDY — 001</div>
  <div class="orbit"></div><div class="core"></div>
</div>

Inline HTML & CSS only. No scripts, external images, or fonts.

RESOLUTION640 × 360

DURATION3 seconds

FRAME RATE24 fps

02Live preview

LIVE CSS

16:9 / 640 × 360YOUR SCENE, IN MOTION

03Your video

PREPARING

Your first render is on its way

72 frames. One tiny video.

↓ Download video

Preparing the example scene…0 / 72

01 / Make it yours

Start with a study. Tweak a color, a word, or an animation in the editor.

02 / Capture the motion

Animations are scrubbed frame by frame, then recorded on a local canvas.

03 / Take it with you

A real video file. MP4 when supported, WebM otherwise. Always yours.