Back to Footers
Inspired by:Jolocky
Added on Oct 5, 2026
Pro Component
Source Code is Locked
Get instant access to complete production TypeScript code & CLI commands.
Autopilot Notch Footer
autopilot-notch
Outro & CTA Architecture
Built from scratch by Jolocky, with our own layout, color and motion.
Signature Standard
Precision interaction engineering with zero external runtime bloat.
Pro Commercial Access
Production-ready multi-file tree built for modern Next.js and Tailwind CSS.
Engineering Breakdown
Autopilot Notch Footer — A sky blue footer for an automation studio that opens with an endless marquee of a catchy phrase and a Book a free audit button, then drops into two dark panels split by a notch cut out of the top. Links, office and social buttons sit on the left, and a newsletter form sits on the right with a name field, an e-mail field and a consent box that report one problem at a time before a loading state and a thank you card. The marquee eases down when you hover it, the panels slide up the first time the footer is seen, sparkle icons spin on hover and a bottom bar shows the live time in Singapore. Under 640px it becomes a single card with an e-mail only form and accordion link groups, and every layout follows the width of the footer itself.
Every interaction state, motion curve, and responsive edge-case has been extracted and reconstructed for seamless integration into modern React applications.
01
Zero — Primitive Dependency & Pure Standalone Pattern: pure React and scoped CSS. There is no UI primitive library, no animation library, no icon package and nothing extra to install.
02
Layout From Its Own Width: a resize observer reads the width of the footer, not the window. Desktop starts at 1024px, tablet at 640px and anything narrower is mobile. Until the first measurement it assumes 1200px, so the server render and the first client render match.
03
Notch Panels: two dark panels with rounded top corners sit on the sky blue background with a strip between them. A blue block with rounded bottom corners is cut into the top of that strip, 72px deep on desktop and 64px on tablet.
04
Endless Marquee: the phrase, a star and the audit button repeat six times and the track slides half its width to the right, so the loop never shows a seam. It takes 26 seconds on desktop and tablet, 18 on mobile, and starts again when the size class changes.
05
Eased Hover: while the pointer is over the marquee, its playback rate eases to 25% over 500ms with an ease out curve, and eases back to full speed when the pointer leaves.
06
Reveal On Scroll: the first time 15% of the footer is visible, each panel slides up 100px and fades in over 900ms, with 110ms between panels.
07
Ordered Validation: the form checks the name first (not on mobile), then the e — mail format, then the consent box. Only one message shows at a time, the matching border turns red, and typing or ticking clears it. A valid form shows Subscribing, then the thank you card, which greets the person by first name on desktop and tablet.
08
Ready for a Real Request: pass an onSubscribe handler to send the name and e — mail to your provider. Returning false or throwing shows a failure message. Without it the demo waits one second and succeeds.
09
Sparkles and Springs: the sparkle in each button turns 180 degrees and pulses over 650ms on hover, the social buttons lift with an alternating tilt, and the back to top arrow loops up and out before the page scrolls to the top.
10
Live Clock Without Mismatch: the Singapore time refreshes every 15 seconds and the server render leaves it empty, so hydration always matches.
11
Mobile Accordions: Services and Company open by animating the grid row from 0fr to 1fr, while the sparkle turns 135 degrees. The office row shrinks to the city and the team line, and the bottom row keeps only the time and two short links.
12
Reduced Motion: the marquee stays still, the panels do not slide in, the icons do not spin and the springy transitions are switched off. The back to top scroll jumps instead of gliding.
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
Web Animations
Inline SVG
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Looping MarqueeNotch PanelsNewsletter ValidationLive ClockAccordion LinksZero Primitive
Color Palette
#A9CFF0
#161616
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
Web Animations
Inline SVG
Zero Primitive
