Before a line of code, the page was mapped the way course 1 teaches it: one person, a start and an end, three acts, one feeling per screen. This is the map, in plain words. Correct it by voice.
Dana
Runs a small thing of her own, or does the marketing for one. Follows AI builds on LinkedIn. She saw a Build Log post, tapped the profile, found the link. She is not shopping.
“Just curious and in search of knowledge, to see what someone else is doing and see how they can do it themselves.”
Your words, October 1. The business owner who would rather hire finds the same door and is not the main plan.
A LinkedIn post about a build. Her tap on your profile. The link in the headline. This page. She writes the email and says what she's building.
Act one. The opening.
The mark at full scale, three lines, one door. One job: she decides to scroll, or writes now.
Feeling: curiosity.
Act two. The middle.
Where the log left off (she came from there). Then the surprise: the page shows its own bones. Then how you work, and who's writing.
Feeling: recognition, delight, trust.
Act three. The door.
Tell me what you're building. What happens if she writes. The address in plain text. The three roads out. The ground turns white to mark the turn.
Feeling: wanting in, then wrote.
| Screen | Content | Action | Feeling |
|---|---|---|---|
| Hero | Websites, films and small tools, built in the open, by a studio of one in Orlando. One line about the log. | Scroll, or write now | Curiosity |
| The log | The last four posted entries, by day and place | Follow on LinkedIn | Recognition |
| The bones | This page was written before it was drawn. A switch. | Flip it; the page labels itself | Delight |
| How I work | Listen first. Guide, don't push. Prove, don't promise. The faith line. The AI line. | Keep reading | Trust |
| Who's writing | I used to quote paver jobs. No settled name yet. | Keep reading | Recognition, trust |
| The door | Tell me what you're building. The address. The three roads. | Write the email | Wanting in, wrote |
Course 2 says motion is a system, not a list of moves: pick a few values once, write them in the kit, repeat them everywhere. These are now Rod & Staff's, in the brand kit, for every page after this one.
Four values, one personality
The approach: product, with one experience moment. The opening is the only choreographed sequence. After it, nothing moves unless you scroll it into view or touch it.
One easing: a curve that settles, no bounce. The one bit of personality is a small overshoot on the way out: a button relaxing back after a hover, the switch knob landing, the nav's button rising into place. Scroll reveals use a softer curve and never anything stronger.
Three durations (quick, base, slow) and a pause before anything moves on load. Buttons fade in quick, with no movement, so nothing pops.
Two distances: headlines and the figure travel further; paragraphs, captions and small things travel half as far.
One step between siblings: the three headline lines, the four log days, the three roads, the bones labels. A stagger gives the eye a line to follow.
Order by importance: words first, the action, then the illustration settles behind them. Scroll reveals fire when a third of the thing is in view. The ember travels: one in view at any time.
| Screen | Motion |
|---|---|
| Hero | A pause, then the three lines rise one step apart. The caption, then the button fades in. The figure settles last, behind the words. |
| The log | The headline rises at a third in view; the four days follow one step apart; the link last. By now the nav's button has risen into place. |
| The bones | Headline, then the paragraph. The knob lands with the one small overshoot; the labels arrive top to bottom one step apart, the outlines a beat after them. |
| How I work | The three lines of the creed rise one step apart, the same move as the hero's headline. The breath follows. |
| Who's writing | Headline, then the paragraph. Nothing else. |
| The door | The headline, then the ask with its button. The nav's button leaves as this one arrives. The three roads follow one step apart. |
Flip the switch on the page: every label now carries its Motion line too.
“I like the direction, it's not bad. I like the story behind. Now we need to build depth. I love this direction. We're doing this the right way.”
The pass stayed. Course 2 was read the same morning, and this motion pass is its answer to “depth.” Visual depth, the 3D kind, is course 3.
Open the page cold, then scroll it once, slowly, then once at your normal speed. Then say, out loud: