@ron_s1: #v60 #اكسبلور #fyp #foryou #your_coffee

R
R
Open In TikTok:
Region: SA
Tuesday 18 August 2026 16:47:35 GMT
129941
9692
20
337

Music

Download

Comments

user213024661704
اسلام هشام :
التاب
2026-08-19 22:07:42
5
as19_al
A. :
فناااااااااااانه عافيه
2026-08-19 01:28:08
2
3bdelrhman.h
不𝐀 .. :
2026-08-19 13:25:43
1
user4091374474546
ناجي الجبيهي😎 :
2026-08-19 08:45:11
1
beshoy.fargalaa
Beshoy Fargalaa :
😳😳😳
2026-08-20 07:35:59
0
omarabdo74461
؏ُـﻤَـَـࢪْٓ| 𝑶𝑴𝑨𝑹🏳️ :
😍😍😍
2026-08-20 16:13:32
0
To see more videos from user @ron_s1, 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