سلام،
ممنون که ویدیو رو تماشا کردید!
آدرس ویدیو رفرنس و پرامت ها رو از زیر میتونید پیدا کنید:
Prompt 1: Build a portfolio website
You're a principal product designer and award-winning creative developer. Design and build a modern, Awwwards-worthy portfolio website for a fictional product designer with exceptional art direction, typography, motion, and interaction design. Use GSAP, shaders, and Three.js where they enhance the experience, and deliver a polished, production-ready website that is responsive, performant, and worthy of Awwwards Site of the Day. Use the attached moodboard as the primary visual direction - pay attention to the yellow sticky-note annotations. Use the attached folder for the project images I want a dark overall aesthetic with modern, editorial layout and strong typographic treatments. Peak work above the fold. Include a work section featuring 2- 3 projects and an about section covering years of experience, design philosophy, and reviews from previous teammates If needed, ask any clarifying questions before starting so you have 99.9% confidence completing this design assignment. Don't make assumptions.
Prompt 2: Cursor image trail effect (optional)
As the pointer moves over the hero spawn a trail of the Project image assets that follows the cursor and fades out behind it
Prompt 3: Liquid scroll effect (optional)
Update the images in the work section so that every work image renders on ONE full-screen WebGL canvas and its plane BOWS with scroll velocity — flat & crisp at rest, curving as you scroll (visible even slow), easing back to flat. Rounded corners (radius per Figma). - Canvas: <canvas> position:fixed, inset:0, full viewport, pointer-events:none, above content; transparent except where work images draw. Must not alter the Figma layout — it only re-renders the work images in place. - OrthographicCamera in screen-pixel space (left=-W/2,right=W/2,top=H/2,bottom=-H/2); resize + devicePixelRatio (cap 2). - Per work image: keep the real <img> in the grid at its Figma position, hidden (opacity:0) but in flow; load as texture; PlaneGeometry(1,1,32,32) + ShaderMaterial. Each frame read the frame's getBoundingClientRect(): mesh.scale.set(w,h,1); mesh.position.x=left+w/2-W/2; mesh.position.y=-(top+h/2)+H/2; Cull off-screen. CRITICAL: no CSS transform on tracked images or ancestors. - Scroll→curve: Lenis velocity → sqrt(|v|) (slow scroll still curves), clamp, ease uVelocity (fast attack ~0.30 / slow release ~0.06); 0 at rest. - VERTEX SHADER: uniform float uVelocity; varying vec2 vUv; void main(){ vUv=uv; vec3 p=position; float arch=cos((uv.x-0.5)*3.14159265); p.y += arch*uVelocity; gl_Position = projectionMatrix*modelViewMatrix*vec4(p,1.0); } - FRAGMENT SHADER: sample texture (cover-fit) + rounded corners via uRadius (SDF). - Tunables: curveK (~0.013), maxCurve (~0.06 premium-subtle), attack/release, radius, segments. - prefers-reduced-motion OR no-WebGL: skip canvas, show plain <img>s
