Sports Hero with Animated Athletes in stickman

Heroes

About

A comprehensive hero section designed for sports and race event websites. Features a theme-aware, split-screen background with a main image and a topography pattern. The key feature is a dynamic animation layer (AnimatedLife) that spawns and moves SVG runners and cyclists across the screen.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sports Hero with Animated Athletes in stickman to your project and fits it to your theme.

Code

How Sports Hero with Animated Athletes in stickman is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { Component } from '@/components/ui/sports-hero-with-animated-athletes-in-stickman'

/**
 * Default Demo for Sports Hero Component
 *
 * This showcases the sports hero with animated runners and cyclists.
 * All props are optional and have sensible defaults.
 */

export default function SportsHeroDefault() {
	return (
		<div className="relative w-full min-h-screen">
			<Component
				title="Can't Attend Your Race? <span>Transfer</span> Your Bib Safely!"
				description="Legal race bib transfers for running, trail, triathlon & cycling events worldwide. <br />Secure payments, verified sellers, and instant organizer approval."
				primaryButtonText="Get Started"
				primaryButtonHref="/get-started"
				secondaryButtonText="Learn More"
				secondaryButtonHref="/learn-more"
				sideImage="https://cdn.21st.dev/assets/mirror/cf/cfabcd519bd0e76681d349d207db776bed3b1398c95f5bd9eb9ffedade0d97a2.jpg"
				backgroundLight="https://cdn.21st.dev/assets/mirror/75/7503c3fbf375bba45b096fac3d1a8ac91ef08df64bff68337d733cde3f1a9793.webp"
				backgroundDark="https://cdn.21st.dev/assets/mirror/17/1700f61de6934f5266f0953c2ef72468ceddf1f9651eb81c1a90326e2dacbf75.webp"
				topographyPattern="https://cdn.21st.dev/assets/mirror/f5/f525df46f43d70801c6706c83f547721914d9f1777f9e7bf9a47337340a05d73.svg"
				animationSpeed={0.75}
				entityDensity={0.2}
			/>
		</div>
	)
}