Case library · Public evidence
No news summaries—only cases that point to finished work, creators, process, and original sources. Rankings, favorites, creator pages, and retests all grow from the same case.
Creator Aceternity UI →
// components/ui/stateful-button.tsx "use client"; import { cn } from "@/lib/utils"; import React from "react"; import { motion, AnimatePresence, us…
Prompt
// components/ui/stateful-button.tsx "use client"; import { cn } from…
Creator Aceternity UI →
// components/ui/apple-cards-carousel.tsx "use client"; import React, { useEffect, useRef, useState, createContext, useContext, } from "react"; impo…
Prompt
// components/ui/apple-cards-carousel.tsx "use client"; import React, {…
Creator Aceternity UI →
// components/ui/images-badge.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "…
Prompt
// components/ui/images-badge.tsx "use client"; import React, { useState…
Creator Aceternity UI →
// components/ui/navbar-menu.tsx "use client"; import React from "react"; import { motion } from "motion/react"; const transition = { type: "spring"…
Prompt
// components/ui/navbar-menu.tsx "use client"; import React from "react";…
Creator Aceternity UI →
// components/ui/compare.tsx "use client"; import React, { useState, useEffect, useRef, useCallback } from "react"; import { SparklesCore } from "@/…
Prompt
// components/ui/compare.tsx "use client"; import React, { useState,…
Creator Aceternity UI →
// components/ui/canvas-reveal-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { Canvas, useFrame, useThree } from "@react-three/f…
Prompt
// components/ui/canvas-reveal-effect.tsx "use client"; import { cn }…
Creator Aceternity UI →
// components/ui/noise-background.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMoti…
Prompt
// components/ui/noise-background.tsx "use client"; import { cn } from…
Creator Aceternity UI →
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = …
Prompt
// components/ui/3d-marquee.tsx "use client"; import { motion } from…
Creator Aceternity UI →
// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from …
Prompt
// components/ui/tooltip-card.tsx "use client"; import React, { useState,…
.webp)
Creator MotionSites →
…d `#0C0C0C`. **Section layout:** - Full-width section, `min-h-screen`, flexbox column, centered both axes - Padding: `px-5 sm:px-8 md:px-10 py-20` -…
Prompt
**Prompt:** Create an "About Me" section using React, Tailwind CSS, and…
.webp)
Creator MotionSites →
… and `lucide-react` for icons. **Fonts (load via Google Fonts in `src/index.css`):** ```css @import url('https://fonts.googleapis.com/css2?family=In…
Prompt
Build a full-viewport cinematic hero section for a travel brand called…
.webp)
Creator MotionSites →
Build a `PricingSection` React component that matches the spec below exactly. ## Stack & global setup - React 18 + Vite + TypeScript, TailwindCSS, `…
Prompt
Build a `PricingSection` React component that matches the spec below…
.webp)
Creator MotionSites →
…tacks vertically with the product panel ABOVE the video (achieved via `flex-col-reverse`). Every value below is exact. ## Tech Stack - React 18 + Ty…
Prompt
Build a standalone React + TypeScript + Tailwind CSS section component.…
.webp)
Creator MotionSites →
Build a single React + TypeScript section using Tailwind CSS. No extra libraries. Fully mobile-responsive. Black background, white text. ## Global P…
Prompt
Build a single React + TypeScript section using Tailwind CSS. No extra…
.webp)
Creator MotionSites →
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…
Prompt
Build a full-page 404 error page for a hosting company called "NEXOVA".…
.webp)
Creator MotionSites →
…ugh it's not used here). The entire page is black background with white text. --- ### Setup - **Font:** Figtree (400, 500, 600) from Google Fonts, l…
Prompt
626f6c742d63632d6167656e74Let me read all the relevant files to compile…
Creator MotionSites →
…etter-spacing throughout.** --- ### Fonts (loaded via Google Fonts in index.html) ``` Inter: weights 400, 500, 600, 700 Source Serif 4: weights 400,…
Prompt
**Create a single-page landing hero section for a creative agency called…
Creator MotionSites →
… Family Church" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and Manrope font (weights: Light, Reg…
Prompt
Create a mobile app showcase page displaying 3 iPhone mockups for "Christ…
Creator MotionSites →
…0;700&display=swap" rel="stylesheet"/> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { font-family: 'Inter', s…
Prompt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta…
Creator MotionSites →
…RAPPER:** Full viewport (`h-screen w-screen`), solid white background, flexbox centered, overflow hidden. --- **PHONE FRAME:** - Dimensions: 375px x…
Prompt
Create a mobile travel app UI mockup displayed inside a realistic…
Creator MotionSites →
Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailw…
Prompt
Create a mobile-first logistics company landing page for "CARGOX GROUP"…
Creator MotionSites →
…/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous">…
Prompt
Build Prompt: Cinematic Space-Travel Landing Page Build a single-page…
.webp)
Creator MotionSites →
…before building the section:** > > **Google Fonts** -- Load these in `index.html` `<head>`: > ```html > <link rel="preconnect" href="https://fonts.g…
Prompt
--- > **Setup requirements before building the section:** > > **Google…
.webp)
Creator MotionSites →
…de-react` for icons. No other UI libraries. **Font & Global CSS (`src/index.css`):** - Import Geist from Google Fonts: `https://fonts.googleapis.com…
Prompt
Build a full-screen, single-page React + TypeScript + Vite + Tailwind CSS…
