evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add randomized portfolio hero variants

Browse Source
This commit is contained in:
Evandro Fonseca Junior committed 2026-07-10 02:46:42 -03:00
1 parent 812499b318
commit 9236fdd685
25 files changed
+1438 -658
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/cinematic/CustomCursor.tsx
+16 -16
View File
@@ -1,7 +1,7 @@
"use client";
import { useEffect, useRef, useState, useCallback } from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { motion, useMotionValue } from "framer-motion";
export default function CustomCursor() {
const [isHovering, setIsHovering] = useState(false);
@@ -10,13 +10,6 @@ export default function CustomCursor() {
const [isVisible, setIsVisible] = useState(false);
const cursorX = useMotionValue(0);
const cursorY = useMotionValue(0);
const springConfig = { damping: 25, stiffness: 250, mass: 0.5 };
const x = useSpring(cursorX, springConfig);
const y = useSpring(cursorY, springConfig);
const ringSpringConfig = { damping: 20, stiffness: 150, mass: 0.8 };
const ringX = useSpring(cursorX, ringSpringConfig);
const ringY = useSpring(cursorY, ringSpringConfig);
const rafRef = useRef<number>(0);
@@ -29,7 +22,7 @@ export default function CustomCursor() {
if (!isVisible) setIsVisible(true);
});
},
[cursorX, cursorY, isVisible]
[cursorX, cursorY, isVisible],
);
useEffect(() => {
@@ -57,7 +50,7 @@ export default function CustomCursor() {
function attachHoverListeners() {
const hoverables = document.querySelectorAll(
'a, button, [role="button"], input, textarea, select, [data-cursor]'
'a, button, [role="button"], input, textarea, select, [data-cursor]',
);
for (const el of hoverables) {
el.addEventListener("mouseenter", handleElementEnter as EventListener);
@@ -89,7 +82,10 @@ export default function CustomCursor() {
}, [handleMouseMove]);
// Don't render on touch devices
if (typeof window !== "undefined" && !window.matchMedia("(pointer: fine)").matches) {
if (
typeof window !== "undefined" &&
!window.matchMedia("(pointer: fine)").matches
) {
return null;
}
@@ -105,8 +101,8 @@ export default function CustomCursor() {
<motion.div
className="pointer-events-none fixed top-0 left-0 z-[9999] mix-blend-difference"
style={{
x,
y,
x: cursorX,
y: cursorY,
translateX: "-50%",
translateY: "-50%",
}}
@@ -126,8 +122,8 @@ export default function CustomCursor() {
<motion.div
className="pointer-events-none fixed top-0 left-0 z-[9998] mix-blend-difference"
style={{
x: ringX,
y: ringY,
x: cursorX,
y: cursorY,
translateX: "-50%",
translateY: "-50%",
}}
@@ -141,7 +137,11 @@ export default function CustomCursor() {
>
<div
className="flex h-full w-full items-center justify-center rounded-full border-[#ccff00]"
style={{ borderStyle: "solid", borderColor: "#ccff00", borderWidth: "inherit" }}
style={{
borderStyle: "solid",
borderColor: "#ccff00",
borderWidth: "inherit",
}}
>
{hoverText && (
<motion.span
app/components/cinematic/HeroScene.tsx
+96 -20
View File
@@ -1,10 +1,18 @@
"use client";
import { useRef, useMemo, useCallback, useEffect } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { Float, MeshDistortMaterial } from "@react-three/drei";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useCallback, useEffect, useMemo, useRef } from "react";
import * as THREE from "three";
type HeroSceneVariant =
| "command"
| "launch"
| "rescue"
| "signal"
| "diagnostic"
| "portrait";
function ParticleField({ count = 2000 }: { count?: number }) {
const mesh = useRef<THREE.Points>(null);
const mouseRef = useRef({ x: 0, y: 0 });
@@ -32,10 +40,13 @@ function ParticleField({ count = 2000 }: { count?: number }) {
return s;
}, [count]);
const handlePointerMove = useCallback((e: { clientX: number; clientY: number }) => {
mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
}, []);
const handlePointerMove = useCallback(
(e: { clientX: number; clientY: number }) => {
mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
},
[],
);
useFrame((state) => {
if (!mesh.current) return;
@@ -107,22 +118,61 @@ function ParticleField({ count = 2000 }: { count?: number }) {
);
}
function FloatingGeometry() {
function FloatingGeometry({ variant }: { variant: HeroSceneVariant }) {
const meshRef = useRef<THREE.Mesh>(null);
const mesh2Ref = useRef<THREE.Mesh>(null);
const mesh3Ref = useRef<THREE.Mesh>(null);
const layout = {
command: {
a: [4, 1.5, -3] as [number, number, number],
b: [-5, -2, -4] as [number, number, number],
c: [2, -3, -5] as [number, number, number],
scale: [1.2, 0.8, 1.5] as [number, number, number],
},
launch: {
a: [3.8, 2.1, -3] as [number, number, number],
b: [0, -1.4, -4] as [number, number, number],
c: [-3.8, -2.6, -5] as [number, number, number],
scale: [0.9, 0.9, 1.8] as [number, number, number],
},
rescue: {
a: [-3.6, 1.2, -3] as [number, number, number],
b: [3.6, 1.2, -4] as [number, number, number],
c: [0, -2.8, -5] as [number, number, number],
scale: [1, 1, 1.4] as [number, number, number],
},
signal: {
a: [-4.2, -1, -3] as [number, number, number],
b: [0.2, 1.6, -4] as [number, number, number],
c: [4.2, -0.6, -5] as [number, number, number],
scale: [0.7, 0.7, 1.2] as [number, number, number],
},
diagnostic: {
a: [4.6, 0.6, -3] as [number, number, number],
b: [-3.5, 1.8, -4] as [number, number, number],
c: [-1.2, -2.8, -5] as [number, number, number],
scale: [1.4, 0.7, 1.1] as [number, number, number],
},
portrait: {
a: [3.2, 0.4, -3] as [number, number, number],
b: [4.8, 2.1, -4] as [number, number, number],
c: [-3.6, -2.4, -5] as [number, number, number],
scale: [1.8, 0.5, 1.1] as [number, number, number],
},
}[variant];
useFrame((state) => {
const t = state.clock.elapsedTime;
if (meshRef.current) {
meshRef.current.rotation.x = t * 0.15;
meshRef.current.rotation.y = t * 0.1;
meshRef.current.position.y = Math.sin(t * 0.4) * 0.3;
meshRef.current.position.y = layout.a[1] + Math.sin(t * 0.4) * 0.3;
}
if (mesh2Ref.current) {
mesh2Ref.current.rotation.x = t * 0.1;
mesh2Ref.current.rotation.z = t * 0.12;
mesh2Ref.current.position.y = Math.cos(t * 0.3) * 0.5;
mesh2Ref.current.position.y = layout.b[1] + Math.cos(t * 0.3) * 0.5;
}
if (mesh3Ref.current) {
mesh3Ref.current.rotation.y = t * 0.08;
@@ -133,13 +183,19 @@ function FloatingGeometry() {
return (
<>
<Float speed={1.5} rotationIntensity={0.4} floatIntensity={0.6}>
<mesh ref={meshRef} position={[4, 1.5, -3]} scale={1.2}>
<icosahedronGeometry args={[1, 1]} />
<mesh ref={meshRef} position={layout.a} scale={layout.scale[0]}>
{variant === "diagnostic" ? (
<boxGeometry args={[1.4, 1.8, 0.08, 3, 3, 1]} />
) : variant === "portrait" ? (
<capsuleGeometry args={[0.55, 1.25, 6, 12]} />
) : (
<icosahedronGeometry args={[1, 1]} />
)}
<MeshDistortMaterial
color="#ccff00"
wireframe
transparent
opacity={0.15}
opacity={variant === "portrait" ? 0.1 : 0.15}
distort={0.3}
speed={2}
/>
@@ -147,8 +203,14 @@ function FloatingGeometry() {
</Float>
<Float speed={1.2} rotationIntensity={0.3} floatIntensity={0.8}>
<mesh ref={mesh2Ref} position={[-5, -2, -4]} scale={0.8}>
<octahedronGeometry args={[1, 0]} />
<mesh ref={mesh2Ref} position={layout.b} scale={layout.scale[1]}>
{variant === "launch" ? (
<coneGeometry args={[0.8, 1.6, 4]} />
) : variant === "signal" ? (
<sphereGeometry args={[0.55, 16, 16]} />
) : (
<octahedronGeometry args={[1, 0]} />
)}
<MeshDistortMaterial
color="#ffffff"
wireframe
@@ -161,8 +223,14 @@ function FloatingGeometry() {
</Float>
<Float speed={0.8} rotationIntensity={0.2} floatIntensity={0.5}>
<mesh ref={mesh3Ref} position={[2, -3, -5]} scale={1.5}>
<torusGeometry args={[1, 0.3, 16, 32]} />
<mesh ref={mesh3Ref} position={layout.c} scale={layout.scale[2]}>
{variant === "rescue" ? (
<boxGeometry args={[1.4, 1.4, 1.4, 2, 2, 2]} />
) : variant === "signal" ? (
<torusKnotGeometry args={[0.7, 0.16, 80, 8]} />
) : (
<torusGeometry args={[1, 0.3, 16, 32]} />
)}
<meshStandardMaterial
color="#ccff00"
wireframe
@@ -226,7 +294,7 @@ function GridFloor() {
}
`,
}),
[]
[],
);
return (
@@ -266,7 +334,11 @@ function CameraRig() {
return null;
}
export default function HeroScene() {
export default function HeroScene({
variant = "command",
}: {
variant?: HeroSceneVariant;
}) {
return (
<div
className="absolute inset-0 z-0"
@@ -292,12 +364,16 @@ export default function HeroScene() {
>
<fog attach="fog" args={["#0a0a0a", 5, 25]} />
<ambientLight intensity={0.3} />
<directionalLight position={[5, 5, 5]} intensity={0.5} color="#ccff00" />
<directionalLight
position={[5, 5, 5]}
intensity={0.5}
color="#ccff00"
/>
<pointLight position={[-5, 3, -5]} intensity={0.3} color="#ffffff" />
<CameraRig />
<ParticleField count={1500} />
<FloatingGeometry />
<FloatingGeometry variant={variant} />
<GridFloor />
</Canvas>
</div>