Sharingan · heroes and sections
Pick a hero. Keep it.
30 animated heroes and sections, each copied into your project with one command, in React or as a Web Component, and yours to change.
Browse components
- #01Pick
- #02Copy
- #03Own
The collection
Each hero ships as a React component and a Web Component. WebGPU heroes fall back to CSS where the GPU is missing; DOM heroes run in every browser. Browse them all with live previews.
Aurora meshWebGPU ●○○Slow bands of coloured light drifting behind the headline; the cursor bends them gently. The quiet one.
Ink flowWebGPU ●●○Brand-coloured ink that swirls behind the headline and follows the cursor: a fluid simulation in compute passes.
Gravity fieldWebGPU ●●○A cloud of particles, coloured by speed, that falls toward the cursor and drifts along noise currents.
Reaction-diffusionWebGPU ●●○A living Gray-Scott pattern grows across the hero, steers around the headline, and sprouts where the cursor passes.
Particle typeWebGPU ●●○The headline is drawn in thousands of particles that scatter under the cursor and spring back; the real text stays in the DOM.
Liquid glassWebGPU ●●●Drops of glass drift over your product screenshot, bending and splitting the light under them; one follows the cursor.
GamepadDOM · every browserA game controller is the navigation: its D-pad and buttons open the sections of the page, from the mouse, the keyboard or a real gamepad.
Holo cardDOM · every browserA card with a holographic foil that leans toward the cursor (or the phone's tilt) and turns over to show its back: a badge, a pass, a membership.
Split headlineDOM · every browserThe headline assembles letter by letter, then the letters near the pointer thicken, lift and take your accent colour.
Marquee typeDOM · every browserOversized words slide in opposite rows under the headline; a row slows under the pointer and scrolling pushes them faster.
Terminal bootDOM · every browserA terminal types your install command, prints its output line by line, and your product rises from it when it is done. The command can be copied.
App windowDOM · every browserYour product's screen, drawn in HTML, builds itself panel by panel (numbers count up, the chart draws), then leans toward the pointer in light 3D.
Beam gridDOM · every browserA fine grid behind the headline, with beams of light running along its lines; it brightens around the pointer and a click sends beams from the nearest crossing.
Conic raysDOM · every browserSoft rays of coloured light turn slowly from above the headline and lean toward the pointer: the calm one, for every browser.
Gallery fanDOM · every browserA fan of artwork cards opens under the headline; the card nearest the pointer rises while its neighbours make room, and collaborator cursors drift between them.
Trail mapDOM · every browserA route draws itself up a mountain photo in a shaped frame, a walker climbs it, clouds drift at their own depth; a strip of routes scrolls below.
Curve reelDOM · every browserProject cards on the inside of a curved wall: the middle sinks back, the edges come forward, and the reel turns slowly while numbered steps light up as the cards pass.
Bento tilesDOM · every browserA centred headline over a wall of soft raised tiles that answer the pointer, and a bento of six cards below: integrations, two counting figures, a scanned portrait, a world map with a folder, and avatars on orbits.
Sky launchDOM · every browserA sun behind layers of pastel clouds; the headline arrives word by word, a rocket takes off and leaves a trail through the sun, and the clouds rise to cover the hero as the page scrolls on.
Iso deckDOM · every browserA macro pad in isometric line art: a cursor selects the floating tile, a tooltip types the tagline and the keys spell a word. Hover the keys to press them, type the word to connect the deck.
The sections
What comes after the hero: sections that move with the scroll, pinned or not, built with GSAP. They run in every browser and keep still under reduced motion.
Card journeyPinned · GSAPA paragraph darkens word by word while a deck of cards shuffles beside it; the deck deals out into a staircase, then lands in a tabbed grid.
Pinned revealPinned · GSAPA headline stays pinned and darkens while a rounded image rises under it and grows to the full width.
Scroll readScroll · GSAPA large paragraph that darkens word by word as it is scrolled, with small images that grow inside the text.
Parallax columnsScroll · GSAPA staggered two-column grid of cards whose columns travel at different speeds as the page scrolls.
Mosaic zoomPinned · GSAPOne image fills the screen, then shrinks back into its place at the heart of a mosaic while the other tiles gather around it.
Image marqueeScroll · GSAPA coloured band of oversized words with images set between them, its rows pushed sideways by the scroll.
Bento assemblePinned · GSAPBento tiles fly in from around the grid and lock into place as the page scrolls; their figures count up as they land, and a play badge turns with the scroll.
Portrait burstPinned · GSAPA stack of portraits rises behind a centred headline, then bursts out into a constellation around it, with short facts set between the faces.
Case trackPinned · GSAPA row of case cards, the first wider with its story, moves sideways as the page scrolls, with a progress bar and arrows; on phones it is a row you swipe.
Split wordPinned · GSAPA giant word pulls its letters together, then parts at one letter so a card can rise into the gap; a contact form fades in below.