Skip to content
Lizzie Teo
Back to the toolkit

Exploration · Motion

A hero that answers back

July 2026Superseded

Can the words in a short introduction show the work behind them, instead of a list of skills?

Paste it into Claude or any AI tool to build your own version.

Read the prompt
Build a home page hero for a design portfolio as a React component.

Content: a short statement about how I work, set large, with five or six key words in it shown in bold as live words.

Interaction: hover, keyboard focus or tap on a live word turns the whole band dark and plays a short clip for that word in a frame beside the text. At rest the frame shows one still illustration, and each clip fades in over it. Leaving the word fades the clip out and returns the band to light.

Rules:
- Live words are real buttons, reachable with the Tab key, with a visible focus ring.
- On touch, a tap opens a word and a tap on another word switches to it.
- Clips are muted, play inline, and load only when the hero is near the screen.
- With prefers-reduced-motion, show a still frame for each word instead of playing the clip, and keep the colour change.
- Mobile first: on narrow screens the frame sits under the text, and nothing scrolls sideways at 320px.

What it was

The home page opened on a short statement about how I work. Six words in it were live: complexity, designed for users, vibe coder, design systems, Figma to code and stakeholders. Hover, focus or tap one and the band turns dark, and a short clip for that word plays in the frame beside the copy.

I made the clips in Figma Weave. At rest the frame shows one still illustration, and each clip fades in over it.

Try it

This is the real hero, not a recording. Hover or tap a bold word.

Lizzie Teo · Product Designer &

A decade designing for

I've : banks, merchants, internal testers, healthcare professionals. Knowing I've made someone's day a little easier is what gives the work meaning.

I love making things simpler. I rethink clunky workflows and build AI ready , from , using tools like Claude Code to ship faster.

I'm just as into the people side. Sitting with and making the process better for the whole team.

What replaced it

In August 2026 the scroll walk through the garden became the home page, and this hero moved off the front door.