About this template
Tenlas Footer is a working reference for an AI or SaaS product: the footer laid out, measured and ready to rebuild. It leads with “Take control of your productivity today” and gives that line the frame rather than shrinking it into a card. Colour is limited to black #050505 underneath, white #F5F5F2 for the type and bright yellow #DBFF00 carrying the accents, set in Inter. Delivery is Tailwind and vanilla JavaScript — one page, no plugin, no build tooling between you and the design. Motion is 50ms transitions and a looping video bed, kept quiet enough that the copy still leads. If you are briefing a SaaS footer, start from this composition and replace the subject.
Designed for
- Hand Tailwind and vanilla JavaScript to the engineer with the 1920x1556 crop attached, then let them rebuild it.
- Write your own headline, then rebuild this footer in Tailwind and vanilla JavaScript with the measurements intact.
- This footer serves designers who have to hand a Tailwind and vanilla JavaScript build to an engineer and want the motion written down.
What's included
- A bar with nothing spare. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #DBFF00 action, all of it sitting above the footer without a background of its own. The links are set below the wordmark in size, and the #DBFF00 action is the only element in the bar with any weight. Design the collapsed state before adding a sixth link.
- Sizes fixed in the brief. Every measurement in the brief is a number you can measure back: type from 14px to 18px, 50vh sections, 18px spacing steps and 50ms transitions. Because the values are fixed, a substitution changes the look without changing the rhythm.
- One media element carries the mood. The media is one 8.8s clip cropped to cover the 1920x1556 frame, so it never letterboxes at any width. A poster frame at 1920x1556 holds the composition when autoplay is unavailable, so the layout never collapses.
- Top row, one action. The bar sits over the 1920x1556 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Short, matched timings
Motion in the controls is short and repeatable: 50ms on each state change. The durations are short enough that feedback reads as a response rather than as an animation.
One scroll behaviour only
Scroll reveal is the only scroll behaviour in the brief, which keeps the page from feeling like a sequence of separate effects. The effect is decorative: turn it off and the hierarchy still works.
Making the footer yours
The trade-off is recognisability. Keep too much of Tenlas Footer and the page reads as someone else's; keep the numbers and change the content and it reads as yours. A different brand can reuse the whole frame.
What moves in Tenlas Footer
When a page feels restless, the cause is usually too many entrances. This one keeps the list short: 50ms transitions, a 8.8s media loop and a scroll reveal. Nothing animates for its own sake in this footer.
Reading Tenlas Footer as a spec
Specific numbers age: a value that suits 1920x1556 may not suit your frame. The brief states type from 14px to 18px and 50vh sections anyway, because a stated value is easier to change than an unstated one. Nothing in this footer depends on a default.
Frequently asked questions
Is the Tenlas Footer prompt a finished spec or a starting point?
The captured brief runs 6,053 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.
Do I need Tailwind and vanilla JavaScript to rebuild Tenlas Footer?
Tenlas Footer was built in Tailwind and vanilla JavaScript, 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 Tenlas Footer brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 6,053-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
