🖱️ גררו לסובב · המודל חי באמת

בונים אתרי 3D
אינטראקטיביים — בלי שורת קוד ידנית

כל מה שלמדתי מקורס של שעה של Viktor Oddy — ויושם כאן בפועל: מודל תלת-ממדי אמיתי ב-WebGL (גררו אותו!), וידאו שנשלט בסקרול, מסכות טקסט, וכרטיסי shader. הכל AI, הכל בדפדפן.

SCROLL ↓
TL;DR

שעה של קורס, חמש אבני דרך

0
פרויקטים מלאים שנבנו לייב
0
תוכנות 3D מסורתיות — AI בלבד
0
אתרים שהוא בנה עם AI לפני הקורס
0
% מהלקוחות מגיעים מטוויטר

SCROLL
DRIVES
THE VIDEO

גללו — הוידאו מתקדם עם הסקרול · הטקסט הוא מסכה חיה מעל הוידאו
Projects 01–05

חמישה פרויקטים, חמש טכניקות

כל כרטיס כאן אינטראקטיבי — זזו מעליו עם העכבר. זו בדיוק טכניקת כרטיסי ה-shader מפרויקט 4.

01 / 3D MODEL

דמות תלת-ממדית שעוקבת אחרי הסמן

תמונת רפרנס → עריכה בפרומפט ("front / side / back view") → AI הופך זוויות למודל 3D → auto-rigging → ייצוא GLB → ל-Claude: "make it follow the cursor". מיושם בראש העמוד — המודל למעלה הוא WebGL אמיתי, גררו אותו.

Figma AIMulti-view 3DThree.jsClaude
02 / SCROLL VIDEO

וידאו שנשלט בסקרול + מסכת טקסט

scroll-scrubbing: ה-currentTime של הוידאו קשור להתקדמות הסקרול, והטקסט הענק הוא מסכה (mix-blend-mode: multiply) שהוידאו נראה רק דרכה. מיושם בסקשן שמעל — גללתם דרכו.

Seedance 2.0Klingmix-blend-mode
03 / FULL SITE

אתר מלא ב-Cursor

שלד עם Grok → הזרקת שפה עיצובית מפרומפט מוכן ("take the design, keep my content") → הטריק המכריע: blending-mode: exclusion שממסג וידאו על רקע שחור בצורה טבעית.

CursorGrok 4.5exclusion
04 / SHADER CARDS

פינטק עם כרטיסי shader

אף פעם לא מאפס: סקרינשוט של אתר עטור פרסים → Bolt משכתב טקסטים → מעל הכל shaders שמגיבים לעכבר. הכרטיס הזה עצמו עושה את זה — כתם האור רודף אחריכם.

Bolt.newShaders21st.dev
05 / FIGMA AS ENGINE

Figma — לא מה שחשבתם

Figma היא מנוע AI: edit-with-prompt, אנימציות בלחיצה, shader effects, קהילה ענקית של תבניות להמרה לקוד, ו-dark mode בלחיצה.

Figma MakeAI AnimateDark Mode Magic
BONUS / GROWTH

איך להפוך את זה לכסף

מקליטים מסך → טוויטר → מתייגים חשבון גדול אחד בלבד (לא מתחרים יחד!) → משפט קצר + inspo credits. פוסט ויזואלי טוב = שיתוף = לקוחות.

Twitter / XScreen Studio
AI × 3D × SCROLL × SHADERS × NO-CODE × AI × 3D × SCROLL × SHADERS × NO-CODE × AI × 3D × SCROLL × SHADERS × NO-CODE ×
orb

mix-blend-mode: exclusion

Principles

ארבעה עקרונות שמפרידים בין "גנרי" ל"עטור פרסים"

1 · תמיד מתחילים מרפרנס

Pinterest, Awwwards, קהילת Figma. AI שמקבל "בנה לי אתר יפה" יוציא גרדיאנטים סגולים. AI שמקבל סקרינשוט של אתר מנצח — יוציא אתר מנצח.

2 · פרומפט = מסמך אפיון

גופנים בשמות מלאים, צבעים מדויקים, מבנה סקשנים, לינקים לנכסים. אפילו אורך הטקסט שומרים ("keep the same number of characters").

3 · מגבילים את ה-AI במפורש

"No overlays. 100% opacity. Do not change colors." — בלי הגבלות, המודל "משפר" ומשנה. להגיד לו מה לא לעשות זה חצי מהמקצוע.

4 · לופים מושלמים לרקעים

הפרומפט הקסום ל-Kling: "animate this, do not change position or size, make it looped" — רקע וידאו חלק שיושב מושלם מאחורי מסכות.

Copy-Paste

הפרומפטים המדויקים מהקורס

// הופכים תמונה למודל 3D:
"Turn this robot to look forward, front view, standing so I can see full height. Remove text elements and UI elements. Create front view, left view, back view and right view."→ מעלים 4 זוויות לכלי multi-view → מודל GLB מוכן
// משכפלים אנימציה:
"Create a video exactly as video one. Do not change anything. 7 seconds, centered."→ וידאו רפרנס + התמונה שלכם = אותה תנועה על הנכס שלכם
// מזריקים שפה עיצובית:
"Take ONLY the design — fonts, sizes, colors — and apply it to our current website. Keep all content, sections and copy the same."→ העיצוב של אתר מנצח, התוכן שלכם
// לופ מושלם לרקע:
"Animate this. Make it spin, make it noticeable. Do not change the position or size. Make it looped."→ ה-"do not change position" הוא שמאפשר מיסוך מעל טקסט
concept car
גרדיאנט CSS מעל תמונה — המעבר החלק מרקע שחור לתוכן, בלי עורך תמונות.
The Stack

ארגז הכלים המלא

Claude / Cursor
בניית האתר מפרומפט
Bolt.new
פרויקטים מסקרינשוט
Figma AI
תמונות + אנימציות + קהילה
Kling / Seedance
וידאו ולופים
Awwwards / Seesaw
רפרנסים ברמת עולם
21st.dev / Shaders
קומפוננטים אינטראקטיביים
Monetization

ומה עושים עם זה?

חבילות וידאו-רקעים לסקרול, נמכרות כמוצר דיגיטלי (Lemon Squeezy / Gumroad).

$9

חבילת 20 סרטוני רקע — נקודת כניסה

$19

40 סרטונים — מכפילים מלאי, מעלים מחיר

$49

100 סרטונים — חבילת פרימיום

$14K

בחודש — 10 מכירות ביום של חבילת ה-$49