Loading…
Case library · Public evidence
Prompt
// components/ui/text-flipping-board.tsx "use client"; import React, { useEffect, useRef, useState, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from…
Prompt
// components/ui/encrypted-text.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView } from "motion/react"; import { cn } from…
Prompt
// components/ui/canvas-text.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef, useState, useCallback } from "react"; interface CanvasTextProps { text:…
Prompt
// components/ui/container-text-flip.tsx "use client"; import React, { useState, useEffect, useId } from "react"; import { motion } from "motion/react"; import { cn } from "@/utils/cn";…
Prompt
// components/ui/background-boxes.tsx "use client"; import React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const BoxesCore = ({…
Prompt
// components/ui/vortex.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion…
Prompt
// components/ui/text-generate-effect.tsx "use client"; import { useEffect } from "react"; import { motion, stagger, useAnimate } from "motion/react"; import { cn } from "@/lib/utils";…
Prompt
// components/ui/text-reveal-card.tsx "use client"; import React, { useEffect, useRef, useState, memo } from "react"; import { motion } from "motion/react"; import { twMerge } from…
Prompt
// components/ui/hero-parallax.tsx "use client"; import React from "react"; import { motion, useScroll, useTransform, useSpring, MotionValue, } from "motion/react"; export const…
Prompt
// components/ui/parallax-scroll.tsx "use client"; import { useScroll, useTransform } from "motion/react"; import { useRef } from "react"; import { motion } from "motion/react"; import {…
Prompt
// components/ui/pixelated-canvas.tsx "use client"; import React from "react"; type PixelatedCanvasProps = { src: string; width?: number; height?: number; /** Size of each cell (in CSS…
Prompt
// components/ui/layout-text-flip.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
Prompt
// components/ui/squiggly-text.tsx "use client"; import React, { useId } from "react"; import { motion, useTime, useTransform } from "motion/react"; import { cn } from "@/lib/utils";…
Prompt
// components/ui/webcam-pixel-grid.tsx "use client"; import React, { useRef, useEffect, useState, useCallback } from "react"; import { cn } from "@/lib/utils"; type WebcamPixelGridProps =…
Prompt
## 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…
Prompt
Build a 404 "Page Not Found" hero page as a single full-viewport (100vh, no scroll) React + Vite + Tailwind CSS application using the DM Sans font and Google Material Symbols Rounded…
Prompt
Build a "Projects / Case Studies" section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts:…
Prompt
Build a single React + TypeScript + Tailwind CSS v3 component called `FreedomSection`. It uses `hls.js` for HLS video streaming and `useEffect` / `useRef` from React. No external icon…
Prompt
Build a single-page hero section for a product called "Measured" — a health/wellness wearable device landing page. The page is fullscreen (100vh), dark/moody aesthetic with layered…
Prompt
Build a single React + TypeScript + Tailwind CSS v3 component called `PrecisionSection`. No external icon libraries — all icons are inline SVG or `<img>` tags. No `useState`, no…
Prompt
Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react. **Layout & Structure:** - Full screen dark background `#0a0a0a`,…
Prompt
Build a single React component for an "About" section using Tailwind CSS. Use `lucide-react` for the ArrowRight icon. System font stack only (no custom fonts). Match every detail exactly:…
Prompt
Prompt: Build a modern React landing page using Vite, Tailwind CSS, and motion/react for elegant animations. The application must feature a highly polished, aesthetic hero section and a…
Prompt
-- **Prompt to recreate the About section:** > Build a full-viewport "About the Founders" section using React with Tailwind CSS and lucide-react for icons. This is a single `<section>`…
