Hello!

I'm
Deyton
Pierce

Here's the prompt:
---
**Design a real estate media services page for a solo creative based at the Lake of the Ozarks. Match the existing style, typography, and color palette of the rest of the website exactly. Do not introduce anything new visually. All images are placeholders to be swapped with real property media later.**
**IMPORTANT: Every single section must have scroll-driven animations. Nothing should be static. Use scroll scrubbing, pinned sections, and staggered reveals throughout. This is the most critical requirement.**
---
**Section 1 — Hero**
Full viewport height. Wide cinematic placeholder image behind a subtle overlay with parallax at 0.5x scroll speed. Headline animates in one word at a time on load: "Real Estate Media." Subheadline fades and slides up after: "The Lake of the Ozarks area moves fast. Your listings should too." Body text fades in next. CTA button slides up last. Everything staggered 200ms apart.
---
**Section 2 — Intro Statement**
Single centered text block. As user scrolls in, the text reveals word by word left to right like a typewriter. Text: "Scroll-stopping video and professional visuals for agents who take presentation seriously."
---
**Section 3 — The Listing Video (Pinned Header)**
Section title "The Listing Video" pins at the top of the viewport as the three tier cards scroll up beneath it. Title unpins once all three cards have passed.
Three cards scroll up from below in sequence — Standard, Premium, Signature — each staggered 200ms apart. Each card has a cinematic placeholder image at the top, tier name, price, bullet points that fade in one at a time as the card enters the viewport, delivery time, and italic tag at the bottom "Available in horizontal or vertical."
Signature card is slightly larger and more visually prominent than the other two. On hover all cards lift 6px with a smooth shadow transition.
---
**Section 4 — Signature Showcase (Pinned Scroll Sequence)**
This section pins in place for an extended scroll. Large full-width placeholder image fills the section.
Three scroll states that transition as user scrolls:
- State 1: Image appears warm, daylight toned. Large text overlaid: "Day to night."
- State 2: Image slowly shifts to a cooler dusk tone via overlay blend. Bullet points reveal one at a time sliding up from below.
- State 3: $700 price fades in large. CTA button slides up beneath it.
Section unpins and normal scroll resumes after state 3 is complete.
---
**Section 5 — Add-Ons**
Heading "Add-Ons" slides in from the left on scroll enter. Two cards side by side. Each card starts 50px below final position at zero opacity. On scroll enter they slide up and fade in with a 150ms stagger. Each card has a placeholder image at top, title, price, and one line description.
---
**Section 6 — CTA Block**
Full width. Wide cinematic placeholder image behind a subtle overlay with parallax at 0.4x scroll speed. Headline scales from 95% to 100% and fades in on scroll enter: "Not sure what fits your listing?" Subtext fades in 200ms later. Two buttons stagger in 150ms apart — primary "Book Now" and secondary "Get in Touch."
---
**Animation Rules — Apply These Globally Without Exception:**
- Every text block fades and slides up 30px on scroll enter
- All scroll triggers fire when element is 15% into the viewport
- All easing is ease-out — nothing linear, nothing bouncy
- Scroll scrubbing used wherever possible over snap triggers
- Staggered children on every list, every card group, every button pair
- Parallax on every full-width image
- Pinned scroll used on tier header and Signature showcase
- Zero animations on page load except the hero
- Nothing appears — everything is revealed
---
That's as specific as a Wireframer prompt can get. If it still skips the scroll animations after this, it's a hard limitation of the tool and you'd need to build the animation layer directly in Framer. Want me to walk you through doing that manually if it comes to it?
Real Estate Media Done Right
Value
Why Work With Me?
Quality over quantity, always.





































Projects
Things I've Made
A mix of projects across design, development, video, and everything in between.
FAQ

Blog
Thoughts & Ideas
Things I'm learning, making, and thinking about.
000000













