_{Hero made by @ybouane.}

@crazygl/hero-wall-e

An animated 3D WALL-E that watches your cursor. His binocular head tracks the pointer with a soft, critically-damped spring — he idles, blinks, leans, and trundles a little on his treads to keep you in view, then perks up and bobs excitedly when you hover the call-to-action. Robot on the left, copy and CTA on the right. Premium, characterful, alive.

Demo

WALL-E

Install

npm install @crazygl/hero-wall-e

Usage

import WallE from '@crazygl/hero-wall-e';

<WallE
  heading="Meet WALL-E."
  subheading="He follows your every move."
  ctaLabel="Say hello"
  ctaHref="#"
/>;

Customise

• Content — heading, subheading, ctaLabel, ctaHref.
• Interaction — lookStrength / lookDamping (how far and how snappily the head turns), driveAmount (how far he trundles toward the cursor), positionX / positionZ (his home spot), eyeTilt (mood roll of the binocular eyes).
• Look & light — ambientLight (overall fill / IBL / floor brightness — the low default reads dark and cinematic), bodyTint, keyIntensity / keyColor, rimIntensity / rimColor, floorContact (contact-shadow opacity), particleAmount (drifting dust density).
• Backdrop — transparent, backgroundTop, backgroundBottom.

Best for

• Product launches and robotics / AI brands wanting a warm, characterful first impression.
• Playful portfolios and app landing pages.
• "Say hello" / contact moments where a living robot beats a static render.

Credits

3D model: "WALL-E(Animated)" by Janis Zeps (Zeps3D), licensed CC-BY-4.0. WALL-E is a character © Disney / Pixar; this model is fan-made — use accordingly.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.