Studio portfolio hero: Template With Motion

Template · Vanilla JS + CSSUpdated November 5, 2026

HeroTemplateVanilla JS + CSS

Prompt for your AI assistant

Paste this into Claude, Cursor or ChatGPT. It carries your headline and palette choice.

Build a "Studio portfolio hero" first screen for my site, composed from these Enrichr Library elements:
- hero: Letter pop intro (https://enrichr.dev/elements/letter-pop-intro.html)
- band: Marquee ticker (https://enrichr.dev/elements/marquee-ticker.html)
- body: Rule sweep list (https://enrichr.dev/elements/rule-sweep-list.html)

Read each element's spec and source at https://enrichr.dev/elements/<name>.json and the template at https://enrichr.dev/templates/studio-portfolio-hero.json.
Requirements: vanilla JavaScript and CSS, no new dependencies; respect prefers-reduced-motion; keep the text real HTML; work on touch screens. Then build the rest of the page below it in the same style.

Settings:
- headline: Studio North
- palette: ink

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and the headline is readable over the background.

The template as JSON: /templates/studio-portfolio-hero.json.

Built from these elements

Letter pop introEach letter overshoots its size and settles, staggered left to right, for a bold page intro. Marquee tickerEndless horizontal text that pauses on hover, with speed, gap and direction controls. Rule sweep listA line sweeps across a menu row on hover or focus and exits through the opposite side.

What it is for

A first screen, not a full site: put your own case-study grid and footer below it.

Section	Full first screen
Techniques	Text animation, Pointer interaction
Stack	Vanilla JS, CSS
Mood	bold, editorial
Status	Preview

Every element in this template respects prefers-reduced-motion and keeps its text as real HTML. Motion pauses when it is off screen. Check contrast after you change the palette, especially for text over the background.

Find this technique on a real site

Want to see this technique in the wild? Check any site with the free tools, then build your own version from this page.

Check which animation library a site uses · Extract a site's design tokens · Browse site breakdowns

Licence and provenance

Free to use in personal and client projects during the preview. Final licence terms will be published here before any paid tier starts; ask before reselling the code as a collection.

Editorial agency pageCalm, text-led opener for an agency or publication: reading highlight, rising headline, hover-indexed services. Creative one-pagerA playful single-screen intro: popping title, floating depth shapes and a fast ticker. SaaS motion landingA product landing opener with a flowing shader backdrop, a rising headline and a scroll-read manifesto.

FAQ

Is this a full website?

No, it is the first screen of one, built from three Enrichr elements. The prompt asks your AI assistant to build the rest in the same style.

Can I change the palette?

Yes. Pick one of three palettes in the preview; the prompt includes your choice.