REFERENCE
- Gallery page: https://magpui.com/en/i/blur-in-footer-with-giant-wordmark-5e050e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/blur-in-footer-with-giant-wordmark-5e050e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/blur-in-footer-with-giant-wordmark-5e050e/clip.mp4
- Original post: https://dribbble.com/shots/27822964-Modern-Footer-Design-SaaS-Landing-Page-Footer by Al Razi Siam
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A site footer that reveals itself when it scrolls into view: four link columns sharpen from a blur one after another, and a giant serif wordmark rises from the bottom edge, cropped by the footer. Quiet, warm and premium.
DESIGN SYSTEM
- Footer card: full width, ~430px tall, background vertical gradient #FFF6EE -> #FDE6D6, soft shadow 0 30px 60px rgba(160,90,50,0.12).
- Grid: 4 equal columns with 48px side padding; column title 12px serif italic #8A6F5E, links 13px sans #3B2F2A, line-height 22px; external links get a small ↗ icon; a "New" badge 9px with 1px border radius 4px.
- Bottom row: small serif monogram left (18px), copyright 11px #A08A7C right.
- Wordmark: serif display ~260px, color #F7C9A8 at 70% with a top-to-bottom fade to transparent, baseline below the footer edge so the lower third is cut off.
MOTION
- Trigger: footer enters the viewport (IntersectionObserver, threshold 0.3), once.
- Columns: each starts at filter blur(10px), opacity 0, translateY 8px; animates to blur(0), opacity 1, translateY 0 over 700ms cubic-bezier(0.22, 1, 0.36, 1), 120ms stagger left to right; links inside a column stagger 40ms.
- Bottom row fades in 200ms after the last column.
- Wordmark: translateY 40% -> 0 and opacity 0 -> 1 over 1100ms cubic-bezier(0.16, 1, 0.3, 1), starting together with the first column.
SECTIONS
- Column 1: brand links (Download, Features, Updates + New badge, Blog).
- Column 2: platform links with ↗.
- Column 3: company / legal links.
- Column 4: social links.
- Bottom row: monogram and copyright.
- Background wordmark.
IMPLEMENTATION
- Framer Motion (whileInView with staggerChildren) or plain CSS transitions toggled by an IntersectionObserver class; blur on small text elements only, never on the whole footer (expensive).
- Wordmark in the brand serif with background-clip: text for the fade, aria-hidden since it is decorative.
- prefers-reduced-motion: no blur and no movement, just a 200ms fade.
- Links keep visible focus rings; hover underline 1px offset 3px.
ADAPT TO THE PROJECT
- Reuse the project's existing design tokens, components and fonts; map the colors to the closest existing tokens.
- Never copy logos, brand names, photos or illustrations from the reference. Use neutral placeholders.
SUCCESS CHECK
- Columns sharpen in order from left to right with no layout shift.
- The wordmark is cropped by the footer edge at every breakpoint and never causes horizontal scroll.
- On mobile the columns stack in 2x2 and the wordmark scales with the viewport width.
