@ٰa.wz: #fyp #اكسبلور

a
a
Open In TikTok:
Region: SA
Thursday 20 August 2026 03:42:44 GMT
29580
1074
3
527

Music

Download

Comments

.z9o10
r. :
1😂
2026-08-20 11:03:12
5
To see more videos from user @ٰa.wz, please go to the Tikwm homepage.

Other Videos

How I build with Claude 👇 Academy in bio 🔗 A site that asks you to draw, step by step: 1. Full screen canvas on top, position fixed, inset 0, z-index 10, background transparent. 2. On pointerdown start recording. On pointermove push { x: e.clientX, y: e.clientY } into an array. On pointerup you check it. Use pointer events, not mouse events, or it dies on touch. 3. Draw as they go: ctx.lineWidth 6, lineCap and lineJoin both 'round', strokeStyle white, and a shadowBlur of 20 in the same color for the glow. 4. Now the recognition. You do NOT need a model for this. Find the bounding box of the points, then the centre. For every point calculate the angle with Math.atan2(y - cy, x - cx). 5. Walk the angles in order and add up the change between each pair. If the total passes 5.5 radians the stroke went nearly all the way round. That is a circle. 6. Second check so a spiral does not pass: the distance from centre to each point must stay within 25% of the average. Consistent radius means circle, growing radius means spiral. 7. On success, animate the messy path into a perfect one. gsap.to on a stroke-dashoffset of an SVG circle, 0.6s, ease power2.out. The correction is the reward. 8. Then the XP. Spawn a div at the last pointer position, animate y from 0 to -60 and opacity 1 to 0 over 0.8s, remove it on complete. Never leave the nodes in the DOM. 9. Points of light around it: absolute divs, scale 0 to 1 with ease back.out(2), stagger 0.05, plus a box-shadow in the accent color for the halo. 10. Always ship a skip. Some people will not draw and some cannot. A small text link that jumps straight past it, or you lose them at the door. Why this works: the visitor stops reading and starts doing. Ten seconds of interaction beats any headline you could write. Save this if you want a site people play with 🌀 #claude #buildinpublic #webdesign #creativecoding #fyp
How I build with Claude 👇 Academy in bio 🔗 A site that asks you to draw, step by step: 1. Full screen canvas on top, position fixed, inset 0, z-index 10, background transparent. 2. On pointerdown start recording. On pointermove push { x: e.clientX, y: e.clientY } into an array. On pointerup you check it. Use pointer events, not mouse events, or it dies on touch. 3. Draw as they go: ctx.lineWidth 6, lineCap and lineJoin both 'round', strokeStyle white, and a shadowBlur of 20 in the same color for the glow. 4. Now the recognition. You do NOT need a model for this. Find the bounding box of the points, then the centre. For every point calculate the angle with Math.atan2(y - cy, x - cx). 5. Walk the angles in order and add up the change between each pair. If the total passes 5.5 radians the stroke went nearly all the way round. That is a circle. 6. Second check so a spiral does not pass: the distance from centre to each point must stay within 25% of the average. Consistent radius means circle, growing radius means spiral. 7. On success, animate the messy path into a perfect one. gsap.to on a stroke-dashoffset of an SVG circle, 0.6s, ease power2.out. The correction is the reward. 8. Then the XP. Spawn a div at the last pointer position, animate y from 0 to -60 and opacity 1 to 0 over 0.8s, remove it on complete. Never leave the nodes in the DOM. 9. Points of light around it: absolute divs, scale 0 to 1 with ease back.out(2), stagger 0.05, plus a box-shadow in the accent color for the halo. 10. Always ship a skip. Some people will not draw and some cannot. A small text link that jumps straight past it, or you lose them at the door. Why this works: the visitor stops reading and starts doing. Ten seconds of interaction beats any headline you could write. Save this if you want a site people play with 🌀 #claude #buildinpublic #webdesign #creativecoding #fyp

About