// components/ui/focus-cards.tsx "use client"; import React, { useState } from "react"; import { cn } from "@/lib/utils"; export const Card = React.memo( ({ card, index, hovered, setHovered, }: { card: any; index: number; hovered: number | null; setHovered: React.Dispatch<React.SetStateAction<number | null>>; }) => ( <div onMouseEnter={() => setHovered(index)} onMouseLeave={() => setHovered(null)} className={cn( "rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out", hovered !== null && hovered !== index && "blur-sm scale-[0.98]" )} > <img src={card.src} alt={card.title} className="object-cover absolute inset-0" /> <div className={cn( "absolute inset-0 bg-black/50 flex items-end py-8 px-4 transition-opacity duration-300", hovered === index ? "opacity-100" : "opacity-0" )} > <div className="text-xl md:text-2xl font-m…
View original source ↗
Prompt
// components/ui/focus-cards.tsx
"use client";
import React, { useState } from "react";
import { cn } from "@/lib/utils";
export const Card = React.memo(
({
card,
index,
hovered,
setHovered,
}: {
card: any;
index: number;
hovered: number | null;
setHovered: React.Dispatch<React.SetStateAction<number | null>>;
}) => (
<div
onMouseEnter={() => setHovered(index)}
onMouseLeave={() => setHovered(null)}
className={cn(
"rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out",
hovered !== null && hovered !== index && "blur-sm scale-[0.98]"
)}
>
<img
src={card.src}
alt={card.title}
className="object-cover absolute inset-0"
/>
<div
className={cn(
"absolute inset-0 bg-black/50 flex items-end py-8 px-4 transition-opacity duration-300",
hovered === index ? "opacity-100" : "opacity-0"
)}
>
<div className="text-xl md:text-2xl font-medium bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-200">
{card.title}
</div>
</div>
</div>
)
);
Card.displayName = "Card";
type Card = {
title: string;
src: string;
};
export function FocusCards({ cards }: { cards: Card[] }) {
const [hovered, setHovered] = useState<number | null>(null);
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto md:px-8 w-full">
{cards.map((card, index) => (
<Card
key={card.title}
card={card}
index={index}
hovered={hovered}
setHovered={setHovered}
/>
))}
</div>
);
}Reusable method
Key decisions
Check whether information hierarchy, module order, and CTA clarity all hold in the final result.
Adapt it to your subject
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Where it breaks
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Creator
Aceternity UI focuses on production-ready AI interfaces and is active on Aceternity UI. “Parallax Hero Images” is the current representative case, built with 待补充模型 with its stability retest open to votes.
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName, }: { children: React.ReactNode; title?: string; href?: string; className?: string; containerClassName?: string; }) => { const [transform, setTransform] = useState( "translate(-50%,-50%) rotateX(0deg)" ); const onMouseEnter = () => { setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)"); }; const onMouseLeave = () => { setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)"); }; return ( <a className={cn( "relative group/pin z-50 cursor-pointer", containerClassName )} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} href={href || "/"} > <div style={{ perspective: "1000px", transform: "rotateX(70deg) translateZ(0deg)", }} className="…
Prompt
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…
.webp)
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d…
Prompt
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link re…