5 second loop · pure #FFFFFF

Dawn, on a white page.

The clip above is playing straight on this page's white. There is no box around it. Press the button to see where the video actually ends.

Run the pixel check
Live pixel check

Your page is #FFFFFF. So is every edge of the clip.

Your browser reads the four corners of the playing video right now, frame after frame. If any of them drifted from pure white, the reading below would change.

Top left—
Top right—
Left side—
Right side—
…reading frames
0 frames checked
The sunrise

Soft dawn, a warm sun climbing behind the bloom, then back to the first frame.

Drag through the five seconds. The petals pick up the light, the shadow firms up as the sun rises, and the last frame hands over to the first with no visible jump.

0.0 s  dawn2.5 s  sunrise5.0 s  loop
5.0s

Flawless loop

120 frames at 24 fps. The cut from the last frame to the first moves less than one normal frame step.

2.0MB

Under 5 MB

1080p MP4 is 2.0 MB, the WebM is 1.7 MB. Both ratios come in well under your limit.

0

Colour shift

Every edge pixel of every decoded frame measures 255, 255, 255, so the clip has no visible edge.

2

Ratios

16:9 for desktop heroes and 1:1 for mobile, each with a 4K master.

H.264+VP9

Every browser

Fast start, plays inline and muted, so it autoplays on iOS Safari, Android Chrome and desktop.

16:9 and 1:1

Wide on desktop, square on the phone.

Same light, same loop. The square cut keeps the whole bloom in frame on narrow screens, so the hero never crops the flower.

Ideas that grow toward the light.

Your agency headline sits here.

16:9 · desktop hero
Studio☰

Ideas that grow toward the light.

Your agency headline sits here.

1:1 · mobile hero
WordPress ready

One block. Paste and publish.

Works as a Gutenberg Custom HTML block or an Elementor HTML widget. It picks the square cut on portrait screens and the wide cut everywhere else.

  1. Upload the four video files to the Media Library.
  2. Add a Custom HTML block (or Elementor HTML widget) at the top of the homepage.
  3. Paste the block and swap in your Media Library links.
<!-- Sunflower sunrise hero -->
<figure class="sun-hero">
  <video autoplay muted loop playsinline
         preload="auto" poster="sunflower-16x9.jpg"
         data-wide="sunflower-16x9"
         data-square="sunflower-1x1"></video>
</figure>
<style>
  .sun-hero{margin:0;background:#fff}
  .sun-hero video{display:block;width:100%;height:auto;
    aspect-ratio:16/9;background:#fff}
  @media (orientation:portrait){
    .sun-hero video{aspect-ratio:1/1}}
</style>
<script>
(function(){
  var v=document.querySelector('.sun-hero video');
  var base=matchMedia('(orientation:portrait)').matches
    ? v.dataset.square : v.dataset.wide;
  v.poster=base+'.jpg';
  [['webm','video/webm'],['mp4','video/mp4']].forEach(function(f){
    var s=document.createElement('source');
    s.src=base+'.'+f[0]; s.type=f[1]; v.appendChild(s);
  });
  v.load();
})();
</script>
On award

The full pack.

This page plays reduced 720p previews. The files below are delivered when the contest is awarded.

4K master, 16:9 and 1:13840 × 2160 · 2160 × 2160
Web MP4 + WebM for both ratiosunder 5 MB each
WordPress block and Elementor widgetautoplay · loop · responsive
Layered source: flower, shadow and sunrise light on separate layersfor colour tweaks
One round of post-render tweaksincluded