قناة المدرب زكي فراش
الذهاب إلى القناة على Telegram
2 908
المشتركون
لا توجد بيانات24 ساعات
+37 أيام
-1530 أيام
أرشيف المشاركات
2 907
Colors: ice sky blue (#CEE8F4, border #4F7F9A), cold water very pale blue, coffee dark brown only.
12.0~12.62s: Shot glass shakes as if walking down a pencil path and stops at the left of the large glass (640, 3830)
12.3~12.95s: Large glass is drawn
13.1 / 13.45 / 13.8s: Three ice cubes drop one by one, squish, bounce, and stack; water splashes on impact
14.2~15.15s: Cold water stream pours from above, water level rises, surface ripples slightly
15.35~16.95s: Lift and tilt the shot glass to pour coffee. Curved stream, water inside the glass dyes coffee-colored from the bottom, swirling line
17.2517.55s: Straw drops from above and wobbles slightly. 17.5518.15s water droplets form on the glass surface, sparkle lines around the glass when ⑤ Complete! is written
18.35~19.35s: While camera pulls back, overdraw the entire passed pencil path lines in brown once more
18.9519.45s: Red (#B2432F) checkmarks are drawn one by one next to ①④ labels
End: Large title and signature are written, and it's done. Do not include numbers (grams, temperatures, etc.) on screen
2 907
Ice Americano Hand-Drawn Motion Graphic Specification
Read the entire specification below and create a hand-drawn motion graphic as a single HTML file. Make it play immediately in the preview.
Screen
Portrait 1080×1920, 22 seconds, loop on completion. Add a play button and playback progress bar below; scale to fit the window so the entire view is visible
All movements calculated with a single time t (seconds) in a render(t) function. Ensure the bar can jump to any moment and show the corresponding frame
At the top of the code, collect phrases, colors, scene timeline, and camera positions
Paper
One 1200×4600 grid practice sheet, landscape. Cream background #ECE6DA with 40 faint turquoise grid lines, slightly bolder every 200 lines
Screen edges slightly darkened to brown
Pencil Line Rules (applied to all drawings)
Lines connect dots, with ~2px left-right jitter at each dot for a hand-drawn feel
Create 3 variants of the same line with different jitters and alternate them 12 times per second. Make the line continuously tremble subtly
Overlay a half-thickness, blurred (45%) line once more on top of the thick line (#2E2622, thickness 4)
Lines appear as if drawn with a pen from one end
Text
Google Font Gaegu Bold. Appears as if scribbled from left to right (10 grids per second, step-like)
Step labels have a pencil circle number in front; once fully written, a fluorescent yellow underline is drawn
Layout (coordinates on paper, center-based)
Title "Ice Americano" (540, 335) size 106, start writing at 0.0s
Subtitle "Until It Becomes One Cup" (540, 508) size 58, 0.9s
① Roasted Beans (430, 1375) size 74, 3.05s
② Grind Finely (760, 2235) size 74, 6.3s
③ Espresso Extraction (450, 3122) size 64, 10.6s
④ Ice + Cold Water (812, 3412) size 62, 14.45s
⑤ Complete! (620, 4222) size 76, 17.3s
End Title "Ice Americano" (620, 4340) size 98, 20.15s / Signature (620, 4418) size 34, 20.75s
Camera (time: viewing position x, y · zoom factor · movement style)
0s (520, 380) ×1.42
1.9s (545, 470) ×1.26 slowly
2.55s (445, 1060) ×1.16 swiftly
4.35s (450, 1070) ×1.24 slowly
5.1s (640, 1890) ×1.2 accelerating
7.75s (650, 1930) ×1.31 slowly
8.3s (450, 2790) ×1.15 swiftly
10.0s (445, 2805) ×1.23 slowly
10.45s (448, 2960) ×1.55 sharp zoom-in
11.95s (448, 2972) ×1.63 slowly
12.6s (620, 3790) ×1.06 swiftly
15.3s (622, 3800) ×1.13 slowly
18.25s (612, 3770) ×1.28 slowly
18.85s (620, 2240) ×0.43 accelerating (pull back to show entire paper)
19.55s (620, 2230) ×0.45 slowly
20.12s (620, 4000) ×1.07 sharp zoom-in
22s (620, 4010) ×1.12 slowly
Swiftly = move short and fast, slight pause on arrival; slowly = smooth approach; sharp zoom-in = instant pull
Motion blur on screen only during swift transitions
Add a faint sketch layer behind the paper, moving slower than camera (position 82%, zoom 72%) for depth
Beans → Powder → Espresso
All materials drawn with the above pencil line rules. The protagonist is a single bean.
Colors: beans #6B4127, bean hollow #3A2215, powder #5A3620, crema #C58E57 only.
0.9~1.28s: A single bean drops from above and lands on the title underline (760, 378). It squishes, bounces, and settles
1.62~2.9s: The bean rolls right, then follows a pencil path line down to the bowl (near 450, 1060). The path line is drawn along with it
2.05~2.95s: The bowl is drawn, and a pile of beans bounces out and stacks inside. Steam rises gently from 3.3s
4.15~4.55s: The bowl tilts, and beans pour in parabolic arcs over the grinder (660, 1900), slipping neatly inside
4.455.45s: Hand grinder is drawn. 5.757.65s handle turns more than two full rotations, with the grinder trembling slightly while spinning
6.05~8.1s: Powder grains flow from under the grinder along paths into the portafilter and pile up
8.25~10.0s: Espresso machine head is drawn, tamper comes down to press the powder firmly then releases (slight squish on press). Portafilter lifts up and clicks into the machine
10.15~11.75s: Two streams of espresso fall into the shot glass (450, 2955), filling it up. Crema layer on top. A few drops at the end
Ice Glass → Completion → Wrap-Up
2 907
شايفين الموشن جرافيك المرفق مع المنشور ؟
تقدر تسوي مثله بكل سهولة ومجانا .
- انسخ البرومبت في المنشور المقتبس
- افتح كلود (الإصدار المجاني) ، ارفق ملف موضوعك ثم أضف هذا البرومبت .
- بعد تحميل الفيديو أضف الصوت بأي برنامج واستمتع بالنتيجة .
' أرفقتُ لك برومبت رسوم متحركة يدوية (قهوة آيس أمريكانو) وملفًا/موضوعًا جديدًا. عدّل البرومبت ليناسب الموضوع الجديد، ثم أنشئ ملف HTML واحدًا ونفّذه مباشرة، بهذه القواعد:
المحتوى: استخرج من المرفق (أو الموضوع الذي أكتبه) عنوانًا وعنوانًا فرعيًا وخمس خطوات مرتبة، واستبدل بها نصوص القهوة وخطواتها.
الرسوم: استبدل البطل والعناصر والألوان بما يناسب الموضوع، وأبقِ أسلوب القلم اليدوي كما هو.
ثابت دون تغيير: مدة 22 ثانية، والأوقات، والإحداثيات، وحركات الكاميرا، وقواعد خط القلم.
اللغة: العربية من اليمين إلى اليسار، بخط عربي مثل Aref Ruqaa، وعبارة «ثانوية سهيل بن عمرو» في التوقيع.
زر التحميل: أضف زر «تسجيل فيديو» يسجّل لوحة الرسم دورة كاملة بدقة 1080×1920 ويحفظها بصيغة WebM، ويختفي إن لم يكن الحفظ مدعومًا.
النشر: انشره كصفحة مستضافة (Artifact) وأعطني الرابط.
الموضوع الجديد: [اكتب موضوعك هنا أو أرفق الملف]
'
2 907
🎨 99 اختصارًا بصريًا للمعلمين
/infographic — حوّل الدرس إلى إنفوغرافيك.
/mindmap — حوّل الموضوع إلى خريطة ذهنية.
/timeline — حوّل الأحداث إلى خط زمني.
/flowchart — حوّل الخطوات إلى مخطط انسيابي.
/diagram — حوّل الفكرة إلى مخطط توضيحي.
/poster — حوّل الدرس إلى ملصق تعليمي.
/flashcards — حوّل الدرس إلى بطاقات سؤال وجواب.
/cheatsheet — حوّل الدرس إلى ورقة غش تعليمية مختصرة.
/summarycard — حوّل الدرس إلى بطاقة ملخص.
/visualnotes — حوّل الدرس إلى ملاحظات بصرية.
📚 شرح المفاهيم بصريًا
/conceptmap — أنشئ خريطة تربط المفاهيم.
/process — اعرض عملية معينة خطوة بخطوة.
/cycle — حوّل العملية المتكررة إلى دورة بصرية.
/hierarchy — اعرض المعلومات على شكل هرم.
/pyramid — حوّل المعلومات إلى هرم تعليمي.
/tree — أنشئ شجرة مفاهيم.
/web — اربط الأفكار في شبكة بصرية.
/layers — وضّح الموضوع على شكل طبقات.
/anatomy — وضّح أجزاء الشيء مع التسميات.
/crosssection — اعرض تركيب الشيء من الداخل.
🔬 العلوم
/science — حوّل المفهوم العلمي إلى صورة تعليمية.
/experiment — حوّل التجربة إلى خطوات مصورة.
/lab — صمم مشهد مختبر تعليمي.
/molecule — وضّح تركيب الجزيء بصريًا.
/atom — وضّح مكونات الذرة.
/cell — أنشئ رسمًا تعليميًا للخلية.
/ecosystem — أنشئ مخططًا للنظام البيئي.
/foodchain — حوّل السلسلة الغذائية إلى رسم.
/anatomyhuman — وضّح أعضاء جسم الإنسان.
/solarsystem — حوّل النظام الشمسي إلى إنفوغرافيك.
➗ الرياضيات
/mathvisual — اشرح المسألة بصريًا.
/fraction — اشرح الكسور باستخدام رسوم.
/geometry — حوّل المفهوم الهندسي إلى رسم.
/shapes — أنشئ لوحة بالأشكال الهندسية.
/numberline — حوّل الأرقام إلى خط أعداد.
/graph — حوّل البيانات إلى رسم بياني.
/equation — اشرح المعادلة بصريًا.
/angles — وضّح أنواع الزوايا بصورة.
/formula — أنشئ بطاقة للقوانين الرياضية.
/puzzlemath — حوّل الرياضيات إلى لغز بصري.
🌍 التاريخ والجغرافيا
/historymap — اربط الأحداث التاريخية بالمواقع.
/historical — حوّل حدثًا تاريخيًا إلى مشهد تعليمي.
/biography — حوّل حياة شخصية إلى خط زمني.
/battlemap — وضّح أحداث معركة على خريطة.
/empire — وضّح توسع إمبراطورية على خريطة.
/geography — حوّل المعلومات الجغرافية إلى إنفوغرافيك.
/map — أنشئ خريطة تعليمية.
/landmarks — اعرض أشهر المعالم مع معلوماتها.
/climate — وضّح أنواع المناخ بصريًا.
/population — حوّل بيانات السكان إلى إنفوغرافيك.
🧠 الحفظ والفهم
/memory — حوّل المعلومات إلى صورة سهلة الحفظ.
/mnemonic — ابتكر وسيلة بصرية للتذكر.
/keywords — أبرز الكلمات المفتاحية بصريًا.
/keyfacts — اعرض أهم الحقائق في بطاقة.
/rules — حوّل القواعد إلى لوحة مختصرة.
/definitions — حوّل المصطلحات إلى بطاقات تعريف.
/vocabulary — صمم بطاقات مفردات مصورة.
/formulae — أنشئ لوحة للقوانين والمعادلات.
/mistakes — اعرض أشهر الأخطاء بطريقة بصرية.
/tips — حوّل النصائح إلى بطاقة تعليمية.
⚖️ المقارنات
/versus — قارن بين مفهومين بصورة.
/beforeafter — اعرض الفرق قبل وبعد.
/similarities — وضّح أوجه التشابه.
/differences — وضّح أوجه الاختلاف.
/proscons — اعرض الإيجابيات والسلبيات.
/twocolumn — قسّم المعلومات إلى عمودين للمقارنة.
/scale — رتّب المفاهيم على مقياس.
/ranking — رتّب العناصر بصريًا.
/matrix — حوّل المقارنة إلى مصفوفة.
/decision — صمم مخططًا لاتخاذ القرار.
🎮 التعليم التفاعلي
/quizimage — حوّل الدرس إلى اختبار بصري.
/guess — أنشئ صورة لعبة "خمن".
/spoterror — أنشئ صورة لاكتشاف الخطأ.
/matchgame — صمم لعبة توصيل.
/wordsearch — أنشئ شبكة بحث عن الكلمات.
/crossword — حوّل المفردات إلى كلمات متقاطعة.
/maze — أنشئ متاهة تعليمية.
/treasuremap — صمم خريطة كنز تعليمية.
/escape — حوّل الدرس إلى Escape Room بصرية.
/challenge — صمم تحديًا بصريًا للطلاب.
✍️ اللغة واللغة العربية
/grammar — حوّل القاعدة النحوية إلى إنفوغرافيك.
/i3rab — اشرح الإعراب بصورة منظمة.
/sentence — حلّل الجملة بصريًا.
/morphology — وضّح بنية الكلمة بصريًا.
/literature — حوّل النص الأدبي إلى لوحة تعليمية.
/poem — حلّل القصيدة في إنفوغرافيك.
/metaphor — وضّح الاستعارة بصورة.
/punctuation — اشرح علامات الترقيم بصريًا.
/spelling — حوّل قواعد الإملاء إلى بطاقة.
/wordtypes — اعرض أنواع الكلمات في مخطط.
🚀 اختصارات قوية جدًا للصور
/lessonposter — حوّل الدرس كاملًا إلى بوستر واحد.
/onepage — اختصر الدرس في صفحة بصرية واحدة.
/visualguide — أنشئ دليلًا بصريًا للموضوع.
/studyboard — صمم لوحة دراسة للطالب.
/revisionmap — أنشئ خريطة مراجعة شاملة.
/examreview — حوّل المطلوب للامتحان إلى إنفوغرافيك.
2 907
المحادثة والتحدث
/conversation — ابدأ محادثة باللغة المستهدفة.
/speaking — تدرب معي على التحدث.
/roleplay — مثّل معي موقفًا واقعيًا.
/interview — حاكني في مقابلة عمل.
/restaurant — درّبني على طلب الطعام في مطعم.
/airport — درّبني على مواقف المطار.
/hotel — حاكني في موقف حجز فندق.
/shopping — درّبني على التسوق باللغة.
/travel — أنشئ محادثات السفر.
/smalltalk — علّمني المحادثات اليومية القصيرة.
/debate — ناقشني بموضوع باللغة المستهدفة.
/phonecall — تدرب معي على مكالمة هاتفية.
/workplace — حاكني في مواقف العمل.
/emergency — علّمني عبارات المواقف الطارئة.
/dating — علّمني عبارات التواصل الاجتماعي المناسبة.
📚 المفردات
/vocabulary — أنشئ قائمة مفردات حسب الموضوع.
/wordofday — علّمني كلمة جديدة يوميًا.
/synonyms — أعطني مرادفات الكلمة.
/antonyms — أعطني أضداد الكلمة.
/collocations — علّمني الكلمات التي تأتي معًا.
/phrases — علّمني العبارات الشائعة.
/idioms — علّمني التعبيرات الاصطلاحية.
/slang — علّمني الكلمات العامية الشائعة.
/academicwords — علّمني المفردات الأكاديمية.
/businesswords — علّمني مفردات الأعمال.
/travelwords — علّمني مفردات السفر.
/verblist — أنشئ قائمة أفعال مهمة.
/adjectives — أنشئ قائمة صفات مفيدة.
/prepositions — علّمني حروف الجر مع أمثلة.
/wordfamilies — علّمني عائلة الكلمة ومشتقاتها.
🧠 الحفظ والمراجعة
/flashcards — حوّل الكلمات إلى بطاقات.
/memorize — أعطني طريقة سهلة لحفظ الكلمات.
/mnemonic — اصنع وسيلة تذكّر للكلمة.
/spacedreview — أنشئ مراجعة متباعدة للمفردات.
/recall — اختبرني بدون إظهار الإجابات.
/wordquiz — اختبر مفرداتي.
/revision — أنشئ جلسة مراجعة.
/mistakes — راجع أخطائي السابقة.
/weakwords — ركز على الكلمات التي أخطئ بها.
/progress — قيّم تقدمي في تعلم اللغة.
✍️ الكتابة
/writing — أعطني تمرين كتابة.
/essay — درّبني على كتابة مقال.
/email — علّمني كتابة بريد إلكتروني.
/message — درّبني على كتابة رسالة طبيعية.
/journal — أعطني موضوعًا لكتابة يوميات.
/storywriting — اكتب قصة تفاعلية أتدرب من خلالها.
/paraphrase — علّمني إعادة صياغة الجمل.
/expand — وسّع جملتي بطريقة طبيعية.
/connectors — علّمني أدوات الربط.
/punctuation — صحح علامات الترقيم.
/writingfeedback — قيّم كتابتي وحدد نقاط الضعف.
/formalwriting — حوّل كتابتي إلى أسلوب رسمي.
/naturalwriting — اجعل كتابتي أكثر طبيعية.
🎧 الاستماع والنطق
/pronunciation — اشرح طريقة نطق الكلمات.
/phonetics — اشرح النطق صوتيًا.
/minimalpairs — درّبني على الأصوات المتشابهة.
/accent — درّبني على اللكنة المطلوبة.
/listenpractice — أنشئ تمرين استماع.
/dictation — أعطني تمرين إملاء سمعي.
/shadowing — أنشئ تمرين Shadowing.
/intonation — علّمني نبرة الجملة.
/stress — وضّح موضع التشديد في الكلمات.
/linking — علّمني ربط الكلمات أثناء الكلام.
/tonguetwister — أنشئ جملًا لتدريب النطق.
/sounds — علّمني أصعب الأصوات في اللغة.
📖 القواعد
/grammar — اشرح لي قاعدة نحوية.
/tenses — اشرح الأزمنة بطريقة سهلة.
/sentence — علّمني تركيب الجملة.
/questions — علّمني تكوين الأسئلة.
/negation — علّمني النفي.
/articles — اشرح استخدام أدوات التعريف والتنكير.
/conjugation — صرّف الأفعال مع أمثلة.
/conditionals — اشرح الجمل الشرطية.
/passive — اشرح المبني للمجهول.
/reported — اشرح الكلام المنقول.
/comparatives — علّمني المقارنة والتفضيل.
/grammarquiz — اختبرني في القواعد.
/grammarerrors — اكتشف أخطائي النحوية.
/grammarcontrast — قارن بين قاعدتين متشابهتين.
🌍 الاستخدام الواقعي والثقافة
/native — علّمني كيف يتحدث أهل اللغة طبيعيًا.
/culture — علّمني جوانب ثقافية مرتبطة باللغة.
/etiquette — علّمني آداب التواصل.
/news — علّمني اللغة من خلال الأخبار.
/movies — علّمني اللغة من خلال مشاهد الأفلام.
/songs — استخدم الأغاني لتعليم المفردات والتعبيرات.
/socialmedia — علّمني لغة مواقع التواصل.
/work — علّمني لغة بيئة العمل.
/presentation — درّبني على تقديم عرض باللغة.
/meeting — حاكني في اجتماع.
/networking — علّمني كيف أتعرف على أشخاص باللغة.
🚀 التعلم الذكي
/leveltest — اختبر مستواي في اللغة.
/studyplan — أنشئ خطة تعلم مخصصة.
/dailylesson — أعطني درسًا يوميًا قصيرًا.
/immersion — اجعل المحادثة بالكامل باللغة المستهدفة.
/translateexplain — ترجم الجملة واشرح سبب الصياغة.
/nativecheck — أخبرني هل الجملة تبدو طبيعية للمتحدث الأصلي.
/correction — صحح كلامي مع شرح الخطأ.
/challenge30 — أنشئ تحدي تعلم لمدة 30 يومًا.
/languagecoach — كن مدرب لغتي وتابع معي التعلم يومًا بيوم.
2 907
/handwritten — Simple, handwritten-style notes.
/decision-matrix — Compare options using key criteria.
/flowchart — Break a process into connected steps.
/infographic — Summarize key facts in visual sections.
/canvas — Organize ideas into a visual planning board.
/layers — Reveal layers and explain each one.
/cycle — Show a repeating process.
/diagram — Show how parts of a system connect.
/roadmap — Map the steps toward a goal.
/sketchnotes — Combine keywords, arrows, and simple drawings.
/iceberg — Explore visible issues and underlying factors.
/blueprint — Show structure in a technical drawing style.
/explodedview — Separate components to reveal how they fit together.
/tree — Organize a topic into categories and subcategories.
/timeline — Put events and milestones in chronological order.
