About this template
Task Engine solves the landing page problem for an ecommerce brand with a single captured brief. The palette is white #F0F0F0 underneath and black #0D0D0D for the type, set in Plus Jakarta Sans. Delivery is one self-contained HTML file, captured at 2104x1080 so the frame is fixed before any code is written. The page keeps its motion to 2400ms transitions, cubic-bezier(.16,1.3,1) and a looping video bed. Use it as the reference when you are building an ecommerce brand landing page and want a finished composition instead of a starting point.
Designed for
- Borrow the landing page structure whole and replace the copy line by line against cubic-bezier(.16,1.3,1) easing.
- Anyone using an AI builder who wants a brief that already contains one self-contained HTML file instead of leaving it to the model.
- If you brief a model rather than a designer, start from the landing page and let the prompt hold a 700px breakpoint.
What's included
- Numbers carried into the build. The values are the specification: 100vh sections, 30px spacing steps, 2400ms transitions and cubic-bezier(.16,1.3,1) easing, captured at 2104x1080 rather than inferred from a screenshot. The list is short enough that a reviewer can check it element by element.
- Faces with one job each. With Plus Jakarta Sans doing the work, the sizes step down hard from the headline to the supporting copy and letter-spacing tightens as the size grows, so the hierarchy is carried by type rather than colour. Substituting the face is possible, but the proportions have to survive the swap.
- Nothing here is inherited. Spacing is quoted the same way (100vh sections, 30px spacing steps, 2400ms transitions and cubic-bezier(.16,1.3,1) easing), not as a scale that grows on its own.
- A clip, not an illustration. The composition is built on top of the 2104x1080 clip rather than beside it, so the media never gets a panel or a border. A poster frame at 2104x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
Motion & interaction
The whole animation budget
Motion in the controls is short and repeatable: 2400ms on each state change. If the easing changes, the duration has to be revisited with it.
Ambient motion without a scroll library
The background clip runs 10.6s at 2104x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. A poster frame stands in when autoplay is blocked, so the motion is additive rather than required.
What this landing page gets right
There is one promise on this page, and 100vh sections and 30px spacing steps hold it in place. Nothing below the fold is asked to carry the offer as well. Task Engine states the offer once and lets the composition repeat it rather than adding a second claim.
How the landing page reflows
Wide, the composition is dense; narrow, the layout shifts at 700px, the section is held at 100vh and the motion has a reduced-motion branch. Both states are described in the brief. The order is the last thing to change.
What to change first in Task Engine
Set the new copy at the display size the brief names (100vh sections and 30px spacing steps), and the rest of the scale follows without a redesign. Set the new copy at the same display size and re-check the contrast before you add anything.
Frequently asked questions
Do I need one self-contained HTML file to rebuild Task Engine?
Task Engine was built in one self-contained HTML file, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
Is the Task Engine brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 14,503-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What do I get when I copy the Task Engine brief?
It is a build brief rather than a mood description: it names the composition at 2104x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
