// components/ui/sticky-banner.tsx "use client"; import React, { SVGProps, useState } from "react"; import { motion, useMotionValueEvent, useScroll } from "motion/react"; import { cn } from "@/lib/utils"; export const StickyBanner = ({ className, children, hideOnScroll = false, }: { className?: string; children: React.ReactNode; hideOnScroll?: boolean; }) => { const [open, setOpen] = useState(true); const { scrollY } = useScroll(); useMotionValueEvent(scrollY, "change", (latest) => { console.log(latest); if (hideOnScroll && latest > 40) { setOpen(false); } else { setOpen(true); } }); return ( <motion.div className={cn( "sticky inset-x-0 top-0 z-40 flex min-h-14 w-full items-center justify-center bg-transparent px-4 py-1", className, )} initial={{ y: -100, opacity: 0, }} animate={{ y: open ? 0 : -100, opacity: open ? 1 : 0, }} transition={{ duration: 0.3, ease: "easeInOut", }} > {childre…
View original source ↗
Prompt
// components/ui/sticky-banner.tsx
"use client";
import React, { SVGProps, useState } from "react";
import { motion, useMotionValueEvent, useScroll } from "motion/react";
import { cn } from "@/lib/utils";
export const StickyBanner = ({
className,
children,
hideOnScroll = false,
}: {
className?: string;
children: React.ReactNode;
hideOnScroll?: boolean;
}) => {
const [open, setOpen] = useState(true);
const { scrollY } = useScroll();
useMotionValueEvent(scrollY, "change", (latest) => {
console.log(latest);
if (hideOnScroll && latest > 40) {
setOpen(false);
} else {
setOpen(true);
}
});
return (
<motion.div
className={cn(
"sticky inset-x-0 top-0 z-40 flex min-h-14 w-full items-center justify-center bg-transparent px-4 py-1",
className,
)}
initial={{
y: -100,
opacity: 0,
}}
animate={{
y: open ? 0 : -100,
opacity: open ? 1 : 0,
}}
transition={{
duration: 0.3,
ease: "easeInOut",
}}
>
{children}
<motion.button
initial={{
scale: 0,
}}
animate={{
scale: 1,
}}
className="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer"
onClick={() => setOpen(!open)}
>
<CloseIcon className="h-5 w-5 text-white" />
</motion.button>
</motion.div>
);
};
const CloseIcon = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
);
};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…