'use client'; import { Scene, ScribbleLine } from '@/src/components/CoreLandingPages/HeroSections/tsx/Sketchy2'; import React, { useEffect, useRef } from 'react'; import gsap from 'gsap'; import { ArrowDown, Github } from 'lucide-react'; // --- Main Hero Component --- export default function Sketchy2() { useEffect(() => { const tl = gsap.timeline(); // 1. Text Typewriter / Fade tl.from('.hand-text', { y: 50, opacity: 0, rotate: 5, duration: 1, stagger: 0.2, ease: 'back.out(1.7)' }); // 2. Draw the squiggle line const path = document.querySelector('#scribble-path') as SVGPathElement; if (path) { const length = path.getTotalLength(); gsap.set(path, { strokeDasharray: length, strokeDashoffset: length, opacity: 1 }); tl.to(path, { strokeDashoffset: 0, duration: 0.8, ease: 'power2.inOut' }, "-=0.5"); } // 3. Pop in buttons tl.from('.sketch-btn', { scale: 0, opacity: 0, duration: 0.5, stagger: 0.1, ease: 'elastic.out(1, 0.5)' }); }, []); return (

{/* Load Google Fonts for that sketchy look */} {/* Background Texture */}

{/* Grid Pattern (Notebook style) */}

{/* 3D Scene Background */}

{/* UI Content */}

{/* Navigation */} {/* Main Hero Text */}

✏️ Hand-crafted in Code

Rough Ideas. Real Impact

We turn back-of-the-napkin sketches into production-ready software. No magic, just hard work and good ink.

{/* Action Area */}

{/* Bottom Doodle Arrow */}

); }

Property	Type	Default	Description
sketchColor	string	#1a1a1a	Color for sketch lines.
paperColor	string	#ffffff	Background paper color.
roughness	number	1	Roughness of sketch lines (0.5-2).
enableHandDrawn	boolean	true	Enable hand-drawn sketch effects.

Sketchy 2

Props