Start with the work. Trace it back to the maker and method.

// components/ui/background-lines.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import React from "react"; export const BackgroundLines = ({…

// components/ui/layout-text-flip.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…

// components/ui/canvas-reveal-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import React, { useMemo, useRef }…

// components/ui/squiggly-text.tsx "use client"; import React, { useId } from "react"; import { motion, useTime, useTransform } from "motion/react"; import { cn } from "@/lib/utils";…

// components/ui/noise-background.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform,…

// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images:…

// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…

// components/ui/webcam-pixel-grid.tsx "use client"; import React, { useRef, useEffect, useState, useCallback } from "react"; import { cn } from "@/lib/utils"; type WebcamPixelGridProps =…

// components/ui/terminal.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const KEY_SOUNDS_DOWN: Record<string,…

Build a React + Vite + Tailwind CSS landing page for "Axion Studio" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons.…

**Prompt:** Create an "About Me" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`.…

## Prompt Build a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency…

Build a full-viewport cinematic hero section for a travel brand called "Wanderful" using React + TypeScript + Vite + Tailwind CSS. Use GSAP for animation and `lucide-react` for icons.…

Build a `PricingSection` React component that matches the spec below exactly. ## Stack & global setup - React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` +…

Build a standalone React + TypeScript + Tailwind CSS section component. This is a fragrance product showcase split into two halves: a looping video on the LEFT and a lime-green product…

Build a single React + TypeScript section using Tailwind CSS. No extra libraries. Fully mobile-responsive. Black background, white text. ## Global Prerequisites - Font: `@import…

Build a full-page 404 error page for a hosting company called "NEXOVA". The entire page is a single viewport-height layout with a looping background video, a navigation bar, a centered…

Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards. Core Features & Interactions: Use React (useState, useEffect, useRef), Tailwind…

**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The…

## Prompt to Recreate CozyPaws Hero Section **Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height…

Create a mobile app showcase page displaying 3 iPhone mockups for "Christ Family Church" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and…