About this template
Read Vela Ul as a features section spec: the values were written down before the page was built. The colour scheme is #16120C underneath and #F7F5F2 for the type, and the page is set in Arial, Helvetica. It ships as one self-contained HTML file, so the whole features section can be lifted into a project without a design handoff. The brief spends its motion budget on 720ms transitions, cubic-bezier(.22,1.36,1) and a looping video bed. It is most useful when the AI & SaaS features section has to survive a copy change without a redesign.
Designed for
- Growth teams reskinning an AI or SaaS product features section who want the 1920x1418 frame kept while the offer copy changes.
- Contract teams taking over this features section who need one self-contained HTML file pinned in the repo before the first commit.
- Product managers who have to estimate the build will read a 410px breakpoint as the scope of the work.
What's included
- Links before the action. A short run of links and a single action sit over the features section, held at a fixed 25px display size and 100vh sections so the bar never competes with the composition behind it. Below 410px the links collapse instead of wrapping onto a second line.
- One media element carries the mood. The composition is built on top of the 1920x1418 clip rather than beside it, so the media never gets a panel or a border. A poster frame at 1920x1418 holds the composition when autoplay is unavailable, so the layout never collapses.
- Figures at display size. The figures are set in Arial, Helvetica at a size closer to the headline than to the body copy. Labels sit under the figures at the smallest step in the brief, so the row reads as data rather than decoration. If a figure needs a paragraph, it is not a stat.
- Behaviour is defined per width. Type is sized with a clamp between 14px and 20px rather than fixed steps, so the display line stays proportionate between breakpoints instead of jumping. Because the scale is clamped, the display line never jumps between breakpoints.
Motion & interaction
Timings in milliseconds
Transitions are specified at 720ms using cubic-bezier(.22,1.36,1), which is the timing the controls are held to. The values are short enough to read as feedback rather than as animation. Keep the durations when you re-skin the page.
Ambient motion without a scroll library
Ambient movement comes from the 4.7s 1920x1418 loop rather than from scroll effects, which keeps the page calm and the type readable. The clip is short enough to loop without a visible seam, which matters more than its resolution.
Making the features section yours
Re-skinning the palette first is the usual mistake. It changes the mood without touching the composition, and a fixed 25px display size and 100vh sections still carry the layout; do the copy and media first and the palette last. Keep the media crop; it is doing as much work as the type.
What an AI or SaaS product gains here
You could rebuild this as a stack of separate cards and lose only the argument. The features section reads as one decision instead: navigation, the headline, the announcement badge, the stats row and the card grid in a single sequence. Vela Ul states the offer once and lets the composition repeat it rather than adding a second claim.
How the features section reflows
Compared with a mobile layout that hides sections, this one keeps them and changes their shape: the scale is fluid rather than stepped, the layout shifts at 410px and the section is held at 100vh. Width changes the measurements, not the reading path.
Frequently asked questions
How long is the prompt behind Vela Ul?
The captured brief runs 25,889 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Why does the entry name one self-contained HTML file at all?
Vela Ul 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.
How is this Vela Ul entry organised?
Everything quoted on the page comes from the captured 25,889-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
