Loading…
Loading…
Creator · Aceternity UI
The reproduction prompt keeps the original and adds runtime, asset and acceptance requirements. These additions are not the author’s words.
// components/ui/scales.tsx
import { cn } from "@/lib/utils";
import React from "react";
export interface ScalesProps {
orientation?: "horizontal" | "vertical" | "diagonal";
size?: number;
className?: string;
color?: string;
}
export const Scales = ({
orientation = "diagonal",
size = 10,
className,
color,
}: ScalesProps) => {
const getGradientAngle = () => {
switch (orientation) {
case "horizontal":
return "0deg";
case "vertical":
return "90deg";
case "diagonal":
default:
return "315deg";
}
};
return (
<div
className={cn(
"absolute inset-0 h-full w-full overflow-hidden",
"[--pattern-scales:var(--color-neutral-950)]/10",
"dark:[--pattern-scales:var(--color-white)]/10",
className,
)}
style={
{
"--scales-size": `${size}px`,
"--scales-angle": getGradientAngle(),
...(color && { "--pattern-scales": color }),
} as React.CSSProperties
}
>
<div
className="h-full w-full bg-[repeating-linear-gradient(var(--scales-angle),var(--pattern-scales)_0,var(--pattern-scales)_1px,transparent_0,transparent_50%)]"
style={{
backgroundSize: `var(--scales-size) var(--scales-size)`,
}}
/>
</div>
);
};
export interface ScalesContainerProps extends ScalesProps {
children?: React.ReactNode;
containerClassName?: string;
}
export const ScalesContainer = ({
children,
orientation = "diagonal",
size = 10,
className,
containerClassName,
color,
}: ScalesContainerProps) => {
return (
<div className={cn("relative", containerClassName)}>
<Scales
orientation={orientation}
size={size}
className={className}
color={color}
/>
<div className="relative z-10">{children}</div>
</div>
);
};
export default Scales;Models & stability
Recommended models
Keep exploring
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI 3D Animated Pin component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
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…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI 3D Globe component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI 3D Marquee component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images: string[]; className?: string; }) => { // Split the image…
Same creator
Each detail page keeps the original result, the prompt, and retest evidence in one reading path.
