Gridiron Kicker

Component

About

An animated SVG robot figure that kicks a football, with a solved leg swing and a drag-free flight-plot showing whether the kick clears the goal posts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gridiron Kicker to your project and fits it to your theme.

Code

How Gridiron Kicker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GridironKicker } from "@/components/ui/gridiron-kicker";

export default function GridironKickerDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
      <GridironKicker
        size={340}
        kick="place"
        behavior="kick"
        view="profile"
        number="03"
        label="KICK / 03"
      />
    </div>
  );
}