+
),
table: ({ className, ...props }: React.ComponentProps<"table">) => (
),
thead: ({ className, ...props }: React.ComponentProps<"thead">) => (
-
+
),
tr: ({ className, ...props }: React.ComponentProps<"tr">) => (
{
- return (
-
-
-
-
-
-
-
-
- )
-}
-
-export function SmoothCursor({
- cursor = ({ x: 0, y: 0 })
- const velocity = useRef({ x: 0, y: 0 })
- const lastUpdateTime = useRef(Date.now())
- const previousAngle = useRef(0)
- const accumulatedRotation = useRef(0)
-
- const cursorX = useSpring(0, springConfig)
- const cursorY = useSpring(0, springConfig)
- const rotation = useSpring(0, {
- ...springConfig,
- damping: 60,
- stiffness: 300,
- })
- const scale = useSpring(1, {
- ...springConfig,
- stiffness: 500,
- damping: 35,
- })
-
- useEffect(() => {
- const updateVelocity = (currentPos: Position) => {
- const currentTime = Date.now()
- const deltaTime = currentTime - lastUpdateTime.current
-
- if (deltaTime > 0) {
- velocity.current = {
- x: (currentPos.x - lastMousePos.current.x) / deltaTime,
- y: (currentPos.y - lastMousePos.current.y) / deltaTime,
- }
- }
-
- lastUpdateTime.current = currentTime
- lastMousePos.current = currentPos
- }
-
- const smoothMouseMove = (e: MouseEvent) => {
- const currentPos = { x: e.clientX, y: e.clientY }
- updateVelocity(currentPos)
-
- const speed = Math.sqrt(
- Math.pow(velocity.current.x, 2) + Math.pow(velocity.current.y, 2)
- )
-
- cursorX.set(currentPos.x)
- cursorY.set(currentPos.y)
-
- if (speed > 0.1) {
- const currentAngle =
- Math.atan2(velocity.current.y, velocity.current.x) * (180 / Math.PI) +
- 90
-
- let angleDiff = currentAngle - previousAngle.current
- if (angleDiff > 180) angleDiff -= 360
- if (angleDiff < -180) angleDiff += 360
- accumulatedRotation.current += angleDiff
- rotation.set(accumulatedRotation.current)
- previousAngle.current = currentAngle
-
- scale.set(0.95)
- setIsMoving(true)
-
- const timeout = setTimeout(() => {
- scale.set(1)
- setIsMoving(false)
- }, 150)
-
- return () => clearTimeout(timeout)
- }
- }
-
- let rafId: number
- const throttledMouseMove = (e: MouseEvent) => {
- if (rafId) return
-
- rafId = requestAnimationFrame(() => {
- smoothMouseMove(e)
- rafId = 0
- })
- }
-
- document.body.style.cursor = "none"
- window.addEventListener("mousemove", throttledMouseMove)
-
- return () => {
- window.removeEventListener("mousemove", throttledMouseMove)
- document.body.style.cursor = "auto"
- if (rafId) cancelAnimationFrame(rafId)
- }
- }, [cursorX, cursorY, rotation, scale])
-
- return (
-
- {cursor}
-
- )
+export function SmoothCursor({ cursor, springConfig }: SmoothCursorProps) {
+ return \n \n \n \n \n \n \n )\n}\n\nexport function SmoothCursor({\n cursor = ({ x: 0, y: 0 })\n const velocity = useRef({ x: 0, y: 0 })\n const lastUpdateTime = useRef(Date.now())\n const previousAngle = useRef(0)\n const accumulatedRotation = useRef(0)\n\n const cursorX = useSpring(0, springConfig)\n const cursorY = useSpring(0, springConfig)\n const rotation = useSpring(0, {\n ...springConfig,\n damping: 60,\n stiffness: 300,\n })\n const scale = useSpring(1, {\n ...springConfig,\n stiffness: 500,\n damping: 35,\n })\n\n useEffect(() => {\n const updateVelocity = (currentPos: Position) => {\n const currentTime = Date.now()\n const deltaTime = currentTime - lastUpdateTime.current\n\n if (deltaTime > 0) {\n velocity.current = {\n x: (currentPos.x - lastMousePos.current.x) / deltaTime,\n y: (currentPos.y - lastMousePos.current.y) / deltaTime,\n }\n }\n\n lastUpdateTime.current = currentTime\n lastMousePos.current = currentPos\n }\n\n const smoothMouseMove = (e: MouseEvent) => {\n const currentPos = { x: e.clientX, y: e.clientY }\n updateVelocity(currentPos)\n\n const speed = Math.sqrt(\n Math.pow(velocity.current.x, 2) + Math.pow(velocity.current.y, 2)\n )\n\n cursorX.set(currentPos.x)\n cursorY.set(currentPos.y)\n\n if (speed > 0.1) {\n const currentAngle =\n Math.atan2(velocity.current.y, velocity.current.x) * (180 / Math.PI) +\n 90\n\n let angleDiff = currentAngle - previousAngle.current\n if (angleDiff > 180) angleDiff -= 360\n if (angleDiff < -180) angleDiff += 360\n accumulatedRotation.current += angleDiff\n rotation.set(accumulatedRotation.current)\n previousAngle.current = currentAngle\n\n scale.set(0.95)\n setIsMoving(true)\n\n const timeout = setTimeout(() => {\n scale.set(1)\n setIsMoving(false)\n }, 150)\n\n return () => clearTimeout(timeout)\n }\n }\n\n let rafId: number\n const throttledMouseMove = (e: MouseEvent) => {\n if (rafId) return\n\n rafId = requestAnimationFrame(() => {\n smoothMouseMove(e)\n rafId = 0\n })\n }\n\n document.body.style.cursor = \"none\"\n window.addEventListener(\"mousemove\", throttledMouseMove)\n\n return () => {\n window.removeEventListener(\"mousemove\", throttledMouseMove)\n document.body.style.cursor = \"auto\"\n if (rafId) cancelAnimationFrame(rafId)\n }\n }, [cursorX, cursorY, rotation, scale])\n\n return (\n \n {cursor}\n \n )\n}\n",
+ "content": "\"use client\"\n\nimport { JSX } from \"react\"\nimport { SmoothCursor as SmoothCursorComponent } from \"smooth-cursor\"\n\nexport interface SmoothCursorProps {\n cursor?: JSX.Element\n springConfig?: {\n damping: number\n stiffness: number\n mass: number\n restDelta: number\n }\n}\n\nexport function SmoothCursor({ cursor, springConfig }: SmoothCursorProps) {\n return
-
-
-
-
-
-
-
- )
-}
-
-export function SmoothCursor({
- cursor = ({ x: 0, y: 0 })
- const velocity = useRef({ x: 0, y: 0 })
- const lastUpdateTime = useRef(Date.now())
- const previousAngle = useRef(0)
- const accumulatedRotation = useRef(0)
-
- const cursorX = useSpring(0, springConfig)
- const cursorY = useSpring(0, springConfig)
- const rotation = useSpring(0, {
- ...springConfig,
- damping: 60,
- stiffness: 300,
- })
- const scale = useSpring(1, {
- ...springConfig,
- stiffness: 500,
- damping: 35,
- })
-
- useEffect(() => {
- const updateVelocity = (currentPos: Position) => {
- const currentTime = Date.now()
- const deltaTime = currentTime - lastUpdateTime.current
-
- if (deltaTime > 0) {
- velocity.current = {
- x: (currentPos.x - lastMousePos.current.x) / deltaTime,
- y: (currentPos.y - lastMousePos.current.y) / deltaTime,
- }
- }
-
- lastUpdateTime.current = currentTime
- lastMousePos.current = currentPos
- }
-
- const smoothMouseMove = (e: MouseEvent) => {
- const currentPos = { x: e.clientX, y: e.clientY }
- updateVelocity(currentPos)
-
- const speed = Math.sqrt(
- Math.pow(velocity.current.x, 2) + Math.pow(velocity.current.y, 2)
- )
-
- cursorX.set(currentPos.x)
- cursorY.set(currentPos.y)
-
- if (speed > 0.1) {
- const currentAngle =
- Math.atan2(velocity.current.y, velocity.current.x) * (180 / Math.PI) +
- 90
-
- let angleDiff = currentAngle - previousAngle.current
- if (angleDiff > 180) angleDiff -= 360
- if (angleDiff < -180) angleDiff += 360
- accumulatedRotation.current += angleDiff
- rotation.set(accumulatedRotation.current)
- previousAngle.current = currentAngle
-
- scale.set(0.95)
- setIsMoving(true)
-
- const timeout = setTimeout(() => {
- scale.set(1)
- setIsMoving(false)
- }, 150)
-
- return () => clearTimeout(timeout)
- }
- }
-
- let rafId: number
- const throttledMouseMove = (e: MouseEvent) => {
- if (rafId) return
-
- rafId = requestAnimationFrame(() => {
- smoothMouseMove(e)
- rafId = 0
- })
- }
-
- document.body.style.cursor = "none"
- window.addEventListener("mousemove", throttledMouseMove)
-
- return () => {
- window.removeEventListener("mousemove", throttledMouseMove)
- document.body.style.cursor = "auto"
- if (rafId) cancelAnimationFrame(rafId)
- }
- }, [cursorX, cursorY, rotation, scale])
-
- return (
-
- {cursor}
-
- )
+export function SmoothCursor({ cursor, springConfig }: SmoothCursorProps) {
+ return 
)}