Sketchy Line
Harmonic stream animation creating flowing cable-like lines that follow mouse movement. Features physics-based strand simulation with smooth interpolation and trail effects.
Main Features of Sketchy Line
How to Use Sketchy Line in Next.js
Installation Guide for Sketchy Line
Related Components
404 Page
Animated 404 error page with a floating astronaut illustration. Features smooth motion animations, interactive hover effects, and a clean retro-futuristic design with framer-motion.
Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does 'Sketchy Line' work?
The component simulates multiple harmonic oscillators (strands) that are 'pulled' by cursor gravity and 'recoil' with varied elasticity for a natural cable feel.
QCan I change the thickness?
Yes, the stroke weight and harmonic frequency can be tuned to create either fine charcoal-like lines or thick, neon-rope effects.
QDoes it work with touch?
Yes, the strand physics respond to touch-move events, allowing mobile users to 'drag' the organic lines across the screen with their fingers.