tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TikTok V4

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-10 11:26:47 +02:00
parent c26c2aae31
commit 854670197b
20 changed files with 629 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/marketing/HeroSpotlight.tsx
View File

@@ -7,9 +7,9 @@ export function HeroSpotlight({ children }: { children: React.ReactNode }) {
const [isHovered, setIsHovered] = useState(false);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
const x = ((e.clientX - left) / width) * 100;
const y = ((e.clientY - top) / height) * 100;
const { left, top } = e.currentTarget.getBoundingClientRect();
const x = e.clientX - left;
const y = e.clientY - top;
setCoords({ x, y });
};
@@ -31,13 +31,13 @@ export function HeroSpotlight({ children }: { children: React.ReactNode }) {
{/* Base Grid - light gray lines */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#cbd5e1_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e1_1px,transparent_1px)] bg-[size:3.5rem_3.5rem] opacity-[0.35]" />
{/* Active Grid - blue lines, only visible within 120px circle around cursor */}
{/* Active Grid - blue lines, only visible within 200px circle around cursor */}
<div
className="absolute inset-0 bg-[linear-gradient(to_right,#3b82f6_1.5px,transparent_1.5px),linear-gradient(to_bottom,#3b82f6_1.5px,transparent_1.5px)] bg-[size:3.5rem_3.5rem] transition-opacity duration-300"
style={{
opacity: isHovered ? 1 : 0,
maskImage: `radial-gradient(120px circle at ${coords.x}% ${coords.y}%, black, transparent)`,
WebkitMaskImage: `radial-gradient(120px circle at ${coords.x}% ${coords.y}%, black, transparent)`,
maskImage: `radial-gradient(200px circle at ${coords.x}px ${coords.y}px, black, transparent)`,
WebkitMaskImage: `radial-gradient(200px circle at ${coords.x}px ${coords.y}px, black, transparent)`,
}}
/>
</div>