Animated hero sections extracted from real projects. Browse a variant, preview it live, and copy the source into your app.
Deploy the Scouts before the bounce rate reaches Trost.
A centered hero for missions that need one clear order, two obvious routes, and zero committee meetings in the throne room.
Simple centered hero for product pages, portfolios, docs, or launch screens that need one clear message and one or two CTAs.
Shiganshina Recovery Sprint
One key. One district. Several unanswered questions from Grisha. A split hero for campaigns that need lore and conversion in equal measure.
Two-column hero for pages that need a strong message beside a product image, visual object, or brand asset.
Scout Regiment Dispatch
Live updates from the formation: blades stocked, horses nervous, strategy allegedly approved by Erwin.
Bold launch or portfolio hero with a scrolling ticker for services, skills, locations, or campaign terms.
Garrison Status
A full-screen command panel for tracking supplies, morale, and whether someone remembered to close the gate.
3
Walls Standing
104th
Cadet Class
0
Safe Assumptions
High-impact hero for landing pages that need a large background word, focused copy, and quick proof points.
Blades, gas, anchors, and enough confidence to pretend this was covered in training.
Supply wagon leaves before sunset
Equip SquadSales-focused hero for offers, ecommerce pages, or waitlists with proof, value points, urgency, and trust signals.
Mikasa Ackerman
Elite close-combat specialist, emotionally unavailable strategist, and final reviewer of reckless Eren plans.
Available when the mission involves precision, loyalty, and removing every blocker in a single pass.
Creative portfolio hero with a scrolling skill marquee and asymmetric headline layout for a strong personal introduction.
Commander, Scout Regiment
Turns impossible odds into one clear order everyone understands
Maps routes, risks, and sacrifice budgets before sunrise
Asks the question nobody wants answered, then builds around it
Keeps the left flank alive long enough for the reveal
Personal profile hero with contact details, availability status, and auto-cycling highlight cards for skills or metrics.
Basement Archive
A dramatic collage for reveals, reports, and documents that make everyone in the room go silent.
0+
Pages recovered
From the basement
Editorial or product hero with a headline and four-card media/stat collage that expands on hover.
Memory Trail
Fragments follow the pointer, fade away, and leave just enough evidence for someone to misunderstand the timeline.
Interactive hero for visual campaigns or portfolios where images appear along the visitor's cursor path.
Inside the basement files, the ocean briefing, and the project notes nobody wanted to version-control.
Hange Zoe
13 Trost 850
Magazine-style article header with full-bleed imagery, overlaid headline, metadata, and a reading CTA.
hover to scramble
Interactive text button for CTAs, nav links, or portfolio actions. Scrambles characters on hover and works without Framer Motion.
Seamless Primitive
Duplicate one identical group, animate the track by half its width, and the reset disappears.
Reusable infinite marquee primitive for logos, cards, chips, or any JSX content. Duplicates one identical group and animates by half the track for a seamless reset.
Paths
Ymir Group Chat
Write your message...
Chat-style scene for case studies, product briefs, or launch stories where a typed reply reveals the key message.
Survey Corps archive
A running logo strip for Attack on Titan references: factions, relics, places, and questionable plans moving in formation.
Two-row logo marquee with opposite-direction scrolling, hover pause, grayscale reveal, and optional detail tooltips.
