Wordmark Lift Outro

Back to Footers
Designed by:Jolocky
Added on Oct 3, 2026
// JOLOCKY PRO EXCLUSIVE: wordmark-lift-footer.tsx
// Wordmark Lift footer main component
// Unlock full multi-file architecture at https://www.jolocky.com/pricing
Pro Component

Source Code is Locked

Get instant access to complete production TypeScript code & CLI commands.

Wordmark Lift Outro
wordmark-lift

Ready to write your first line of code?

Join thousands of learners building real skills with free, hands-on coding lessons.

Start learning free

Jolocky is a free platform for learning to code. Interactive lessons, real projects and certifications, open to everyone at no cost.A free platform for learning to code, open to everyone.

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

Wordmark Lift Outro — A signature curved outro footer featuring a cursor-following spotlight CTA, spring-lift card reveal, responsive mobile accordions, and a staggered giant wordmark with replay interaction.
Notes on how this item works: its interaction states, motion and responsive layout, written in our own code.
01
Zero-Primitive Dependency & Pure Standalone Pattern — 100% immune to Radix UI / Base UI / external package conflicts; works cleanly in any Next.js codebase.
02
Interactive Spotlight CTA — Cursor-following radial glow dynamically updates CSS variables (--mx, --my) via smooth pointermove tracking.
03
Viewport Scroll Lift — Seamless IntersectionObserver trigger smoothly lifts the curved content card with deep ambient elevation shadows.
04
Responsive Mobile Accordion — Links collapse into an animated accordion with 0fr to 1fr grid transitions and aria-expanded accessibility on screens under 640px.
05
Giant Letter-Staggered Wordmark — Multi-span SVG gradient-clipped wordmark rises sequentially with custom animation delays and replays on click.
Last Updated
Oct 3, 2026
Tags & Specifications
Spotlight CTAWordmark StaggerInteractiveZero PrimitivePure Standalone
Color Palette
#050505
#ffffff
#f2f2f1
#111111
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
TypeScript
Tailwind CSS
Scoped CSS
Inline SVG