Scrollcraft ও Claude Code দিয়ে স্বতন্ত্র স্ক্রল-নির্ভর ওয়েবসাইট তৈরি করুন

Scrollcraft কী?

Scrollcraft হলো Claude Code-এর একটি স্কিল, যা ডিজাইনের কারুকাজের একটি সামঞ্জস্যপূর্ণ মান বজায় রেখে প্রিমিয়াম, স্ক্রল-নির্ভর ওয়েবসাইট তৈরি করে। এটি ইন্টারঅ্যাকশন, ভিজ্যুয়াল নির্দেশনা, টাইপোগ্রাফি, স্পেসিং, রং, গভীরতা এবং যাচাইকরণকে একই প্রক্রিয়ার অংশ হিসেবে বিবেচনা করে।

বারবার পরিচিত hero, feature card, testimonial এবং call-to-action সেকশনের একই ধারাবাহিকতা তৈরি করার বদলে, Scrollcraft প্রথমে একটি page grammar নির্বাচন করে। এই grammar নির্ধারণ করে অভিজ্ঞতাটি কীভাবে এগোবে, কীভাবে নেভিগেট করা হবে এবং কোন পরিচিত প্যাটার্নগুলো এড়াতে হবে।

এই স্কিল পাঠক স্ক্রল করার সঙ্গে সঙ্গে ভিডিওকে ফ্রেম ধরে এগিয়ে নিতে, কোনো বক্তব্য বিকশিত হওয়ার সময় দৃশ্য pin করে রাখতে, horizontal rail সরাতে, headline লাইন ধরে সাজাতে, পেজের ভিত্তি বদলাতে এবং pointer-এর নড়াচড়ায় প্রতিক্রিয়া জানাতে পারে। প্রতিটি build-এ সেই সাইটের নিজস্ব একটি বিশেষ signature interaction-ও থাকতে হবে।

Scrollcraft কীভাবে build-গুলোকে স্বতন্ত্র রাখে

Scrollcraft আটটি পারস্পরিকভাবে একচেটিয়া page grammar দেয়:

• Filmic one-shot: একটি অবিচ্ছিন্ন, সিনেমাটিক উপস্থাপনা।
• Chaptered editorial: সম্পাদকীয় অধ্যায়ের একটি কাঠামোবদ্ধ ধারাবাহিকতা।
• Live surface: ইন্টারঅ্যাকশন-চালিত একটি প্রতিক্রিয়াশীল surface।
• Continuous world: দৃশ্যমান section seam ছাড়া একটি স্থির stage।
• Typographic poster: মূলত type-নির্ভর একটি composition।
• Gallery: ভিজ্যুয়াল কাজকে কেন্দ্র করে সাজানো একটি অভিজ্ঞতা।
• Split stage: সমন্বিত content area-সহ একটি বিভক্ত উপস্থাপনা।
• Rhythmic cutlist: পরিকল্পিত ভিজ্যুয়াল cut-এর মাধ্যমে গঠিত একটি ধারাবাহিকতা।

এগুলো পরস্পরবদলযোগ্য theme নয়। প্রতিটি grammar কিছু কাঠামোগত পছন্দ বাধ্যতামূলক করে এবং অন্য কিছু নিষিদ্ধ করে। ফলে আলাদা project-গুলো অজান্তে একই skeleton-এ এসে মিশে যাওয়ার সম্ভাবনা কমে।

PERKFORM filmic, product-forward দিকটি তুলে ধরে। এটি প্রচলিত section-এর স্তূপের ওপর নির্ভর না করে one-shot presentation এবং full-bleed inverted ground-এ hard cut ব্যবহার করে।

Fallowbank দেখায়, একই skill কীভাবে একটি সংযত documentary treatment তৈরি করতে পারে। এতে photography-এর ওপর museum-label copy ব্যবহার করা হয়েছে এবং standard button-এর বদলে running text দিয়ে শেষ করা হয়েছে।

Fingerprint gate

প্রথম project-এর পর প্রতিটি নতুন build আপনার আগের কাজের সঙ্গে তুলনা করা হয়। ছয়টির মধ্যে অন্তত চারটি মাত্রায় এটিকে আলাদা হতে হবে: grammar, navigation, hero, act shape, close এবং signature move। ব্যর্থ হলে record দুর্বল বা পুনর্লিখন না করে plan পরিবর্তন করতে হবে।

প্রথম build-কে কোনো বিদ্যমান fingerprint অতিক্রম করতে হয় না, কারণ registry খালি অবস্থায় শুরু হয়। এটি ইচ্ছাকৃত: gate-টির উদ্দেশ্য হলো নিজের কাজের পুনরাবৃত্তি থামানো।

Design ও interaction-এর মানদণ্ড

আলাদা act সংজ্ঞায়িত করার আগে Scrollcraft একটি feeling curve তৈরি করে। প্রতিটি act-এর জন্য একটি নির্দিষ্ট emotion এবং screen-এ তার একটি কারণ নির্ধারণ করা হয়। পরপর দুটি act একই অনুভূতি তৈরি করলে, তার একটি অপ্রয়োজনীয় হতে পারে।

এরপর page-টি একটি engineered peak-কে কেন্দ্র করে সংগঠিত হয়। সেই মুহূর্তে সবচেয়ে বড় asset budget, তার আগে যথেষ্ট নীরবতা এবং পর্যাপ্ত scroll distance বরাদ্দ করা হয়। প্রতিটি section-কে সমানভাবে dramatic না ধরে এটি সরাসরি peak-end rule প্রয়োগ করে।

Craft rules

• Typography: সর্বোচ্চ দুটি font family, নিয়ন্ত্রিত tracking, ৪৫ থেকে ৭৫ character-এর measure এবং measure-এর সঙ্গে সামঞ্জস্য রেখে নির্ধারিত line height।
• Spacing: 4px base scale, heading-এর নিচের চেয়ে ওপরে বেশি space এবং ছোট screen অনুযায়ী মানিয়ে নেওয়া fluid section padding।
• Color: ছয়টি role এবং একটি accent, tint করা secondary text, pure black নয় এবং light ও dark ground-এর মধ্যে পরিকল্পিত cut-এর সমর্থন।
• Depth: Offset shadow, edge light, scale ও blur, overlap এবং grain-কে পৃথক tool হিসেবে বিবেচনা করা হয়।
• Brand compliance: সরবরাহ করা brand kit-এর নিয়ম Scrollcraft-এর default-কে অগ্রাধিকার দেয়। এর মধ্যে এমন restriction-ও রয়েছে, যা skill অন্যথায় বেছে নিতে পারত এমন technique নিষিদ্ধ করে।

এই skill সাধারণ AI-generated design shortcut-ও প্রত্যাখ্যান করে, যেমন একই রকম feature-card grid, decorative counter, generic scroll cue, gradient text, বানানো statistic, fake dashboard, AI-purple gradient এবং default cream-and-brass craft-brand palette।

Claude Code plugin ইনস্টল করুন

প্রথমে plugin marketplace যোগ করুন, তারপর design plugin ইনস্টল করুন:

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Claude Code যদি Run /reload-plugins to activate. জানায়, তাহলে চালিয়ে যাওয়ার আগে ওই command চালান।

আপনি সরাসরি এই command দিয়ে Scrollcraft চালু করতে পারেন:

/nateherk-design:scrollcraft

Claude Code-এ যে scroll-driven site চান, তা বর্ণনা করেও skill ব্যবহার করতে পারেন। প্রক্রিয়াটি স্পষ্টভাবে শুরু করতে চাইলে direct command কার্যকর।

ইনস্টল না করে develop করুন

plugin হিসেবে ইনস্টল না করে skill repository স্থানীয়ভাবে পরিদর্শন বা পরিবর্তন করতে plugin directory-সহ Claude Code চালু করুন:

claude --plugin-dir ./plugins/nateherk-design

প্রয়োজনীয়তা যাচাই করুন

Scrollcraft কয়েকটি স্থানীয় tool-এর ওপর নির্ভর করে। build শুরু করার আগে এগুলো নিশ্চিত করুন:

• Node.js 18 বা তার পরের সংস্করণ: অন্তর্ভুক্ত সব স্ক্রিপ্টের জন্য আবশ্যক।
• সম্পূর্ণ ffmpeg বিল্ড: ক্লিপ এনকোড করতে ব্যবহৃত হয়, যাতে সেগুলো স্বাভাবিকভাবে চলার বদলে সঠিকভাবে স্ক্রাব করা যায়। স্ট্রিপড বিল্ডে scale-এর মতো প্রয়োজনীয় ফিল্টার বাদ পড়তে পারে।
• playwright-core এবং Chrome: ব্রাউজার-ভিত্তিক যাচাই ধাপে ব্যবহৃত হয়।
• KIE_AI_API_KEY: ঐচ্ছিক এবং কেবল অ্যাসেট তৈরি করার সময় প্রয়োজন। আপনার নিজস্ব ছবি বা ফুটেজ দিয়ে তৈরি প্রকল্পে এই কী প্রয়োজন হয় না।

সঠিক অবস্থান থেকে মডিউল রেজোলিউশন সম্পন্ন হওয়ার জন্য বিল্ড ফোল্ডারের ভেতরে playwright-core ইনস্টল করুন:

npm i playwright-core

Scrollcraft সঠিক এক্সিকিউটেবল খুঁজে না পেলে SCROLLCRAFT_FFMPEG এবং SCROLLCRAFT_CHROME ব্যবহার করে তার অনুসন্ধান ওভাররাইড করা যায়।

Windows-এ সম্পন্ন বিল্ডের জন্যই এখন পর্যন্ত Scrollcraft ব্যবহার করা হয়েছে। এর স্ক্রিপ্ট Windows, macOS এবং Linux-এর সাধারণ অবস্থানগুলোতে অনুসন্ধান করে, তবে README-তে macOS-এ কোনো বিল্ড সম্পন্ন হয়েছে বলে দাবি করা হয়নি।

প্রিফ্লাইট চালিয়ে একটি ওয়ার্কস্পেস তৈরি করুন

অন্য কিছু করার আগে ডায়াগনস্টিক স্ক্রিপ্ট চালান। এটি অনুপস্থিত বা অসামঞ্জস্যপূর্ণ নির্ভরতা জানায়, যেগুলো পরে বিভ্রান্তিকর ত্রুটি তৈরি করতে পারে।

node scripts/doctor.mjs

এই পরীক্ষা বিশেষভাবে গুরুত্বপূর্ণ, কারণ একটি স্ট্রিপড ffmpeg বাইনারি অনুপস্থিত ফিল্টারকে সিনট্যাক্স ত্রুটি হিসেবে জানাতে পারে, অনুপস্থিত WebP muxer-কে ফাইলনামের সমস্যা মনে হতে পারে, এবং playwright-core ভুল ডিরেক্টরি থেকে রেজলভ হতে পারে।

প্রিফ্লাইট সফল হওয়ার পর ওয়ার্কস্পেস এবং তার খালি ফিঙ্গারপ্রিন্ট রেজিস্ট্রি তৈরি করুন:

node scripts/workspace.mjs --ensure

ওয়ার্কস্পেস কীভাবে নির্বাচন করা হয়

Scrollcraft নিচের ক্রমে ওয়ার্কস্পেস রেজলভ করে এবং প্রথম মিল পাওয়ার পর থেমে যায়:

1. SCROLLCRAFT_HOME-এ সংরক্ষিত পাথ।
2. বর্তমান ডিরেক্টরি থেকে ওপরের দিকে অনুসন্ধান করে পাওয়া নিকটতম .scrollcraft.json-এ নির্ধারিত ওয়ার্কস্পেস।
3. প্রকল্পের রুটের অধীনে থাকা scrollcraft ডিরেক্টরি।

একটি ওয়ার্কস্পেস কনফিগারেশন ফাইলের রূপ হলো:

{ "workspace": "path/to/builds" }

বিল্ডগুলো <workspace>/builds/<name>/-এর অধীনে লেখা হয়, আর ফিঙ্গারপ্রিন্ট রেজিস্ট্রি সংরক্ষিত থাকে <workspace>/FINGERPRINTS.md-এ।

আপনার প্রথম প্রকল্প তৈরি করুন

প্লাগইন সক্রিয় এবং ওয়ার্কস্পেস তৈরি হয়ে গেলে Scrollcraft চালু করুন:

/nateherk-design:scrollcraft

সাইটটি, এর বিষয়, আপনার কাছে থাকা অ্যাসেট এবং প্রযোজ্য ব্র্যান্ড-নিয়মগুলো বর্ণনা করুন। KIE_AI_API_KEY কনফিগার করা থাকলে তৈরি করা অ্যাসেটের পথ বেছে নিতে পারেন, অথবা কোনো জেনারেশন খরচ ছাড়াই নিজের ছবি ও ফুটেজ ব্যবহার করতে পারেন। বিদ্যমান অ্যাসেট ব্যবহার করা একটি প্রধান কর্মপ্রবাহ, বিকল্প বা fallback নয়।

এই স্কিলটি সাক্ষাৎকার নেওয়া, একটি গ্রামার নির্বাচন, ধারণার স্কোর নির্ধারণ, পেজ তৈরি এবং ফল যাচাই করার প্রক্রিয়া অনুসরণ করে। এর রেফারেন্সগুলো feeling curve, scroll device, continuous-world নির্মাণ, art direction, অ্যাসেট প্রস্তুতি এবং ডিজাইন-মানও নির্ধারণ করে।

নির্বাচিত গ্রামার মেনে চলুন

নির্বাচিত গ্রামারকে কোনো ভিজ্যুয়াল প্রিসেট হিসেবে বিবেচনা করবেন না। উদাহরণস্বরূপ, একটি continuous-world প্রকল্পের আচরণ হওয়া উচিত একটি নির্দিষ্ট মঞ্চের মতো, যেখানে সেকশনের কোনো বিভাজন নেই। একটি chaptered editorial প্রকল্প ভিন্ন কাঠামো ও নেভিগেশন মডেল অনুসরণ করে। প্রয়োজনীয় প্যাটার্নগুলো মিশিয়ে ফেললে প্রকল্পগুলোকে আলাদা রাখার ব্যবস্থাটিই দুর্বল হয়ে পড়বে।

একটি স্বাক্ষরধর্মী মুভ পরিকল্পনা করুন

প্রতিটি সাইটে এমন একটি নিজস্ব ইন্টারঅ্যাকশন থাকতে হবে, যা শুধু সেই প্রকল্পেই বিদ্যমান। কোনো spotlight-এর রং সামান্য বদলে দেওয়া এর যোগ্য নয়। মুভটি বিষয় ও অভিজ্ঞতা থেকে স্বাভাবিকভাবে উদ্ভূত হওয়া উচিত, সাধারণ সাজসজ্জা হিসেবে পরে যোগ করা নয়।

ইঞ্জিন সঠিকভাবে ব্যবহার করুন

সবচেয়ে গুরুত্বপূর্ণ বাস্তবায়ন-নিয়ম হলো, প্রতি প্রকল্পের জন্য ইঞ্জিন সম্পাদনা করা যাবে না। এটি বিল্ডগুলোর মধ্যে ভাগ করা ব্যবস্থাটি সরবরাহ করে, কনফিগারযোগ্য পেজ জেনারেটর নয়।

প্রতিটি প্রকল্পের জন্য:

1. ছয়টি রঙের টোকেন এবং সর্বোচ্চ দুটি ফন্ট দিয়ে ইঞ্জিনের থিম তৈরি করুন।
2. সাইটটির জন্য নির্দিষ্ট সেমান্টিক HTML লিখুন।
3. নিজস্ব আচরণ নিয়ন্ত্রণ করতে ইঞ্জিন-প্রকাশিত --sc-p কাস্টম প্রপার্টি ব্যবহার করুন।
4. প্রকল্প-নির্দিষ্ট লেআউট ও ইন্টারঅ্যাকশন শেয়ার করা ইঞ্জিনের বাইরে রাখুন।

রানটাইমে কোনো কনফিগারেশন অবজেক্ট থেকে পুরো পেজ তৈরি করা এড়িয়ে চলুন। Scrollcraft-এর ডিজাইন দর্শন অনুযায়ী, এই অ্যাবস্ট্রাকশনই একটি সিস্টেম দিয়ে তৈরি সাইটগুলোকে একই রকম দেখানোর মূল কারণ।

যাচাই ধাপটি বুঝুন

Scrollcraft সম্পূর্ণ পেজটি প্রতিটি স্ক্রল অবস্থানে পরিদর্শন করতে একটি headless browser ব্যবহার করে। ভিডিও-নির্ভর অভিজ্ঞতার ক্ষেত্রে ফ্রেম মূল্যায়নের আগে এটি playhead স্থির হওয়া পর্যন্ত অপেক্ষা করে।

যাচাই প্রক্রিয়া জানায়:

• Dead scroll: এমন স্ক্রল দূরত্ব, যা স্ক্রিনে দৃশ্যমান কোনো পরিবর্তন ঘটায় না।
• অসম্পূর্ণ cue: এমন টেক্সট বা অন্যান্য cue, যা কখনো সম্পূর্ণ opacity-তে পৌঁছায় না।
• Composited contrast failure: প্রতিটি লাইনের নিচ দিয়ে যাওয়া সবচেয়ে উজ্জ্বল ফ্রেমের বিপরীতে কনট্রাস্ট পরীক্ষা করা হয়; হালকা-অন-গাঢ় বা গাঢ়-অন-হালকা টেক্সট অনুযায়ী দিক নির্বাচন করা হয়।
• Undecoded clip: এমন ভিডিও, যা poster frame-এ আটকে থাকে এবং অন্যথায় ইচ্ছাকৃতভাবে থামানো চলচ্চিত্রের মতো দেখাতে পারে।

এই প্রক্রিয়া মানুষের পর্যালোচনার জন্য একটি contact sheet-ও তৈরি করে। স্বয়ংক্রিয় পরীক্ষা পেজটি কাজ করছে কি না তা নিশ্চিত করতে পারে, কিন্তু অভিজ্ঞতাটি অর্থবহ বা আবেগগতভাবে কার্যকর কি না তা নির্ধারণ করতে পারে না।

উন্নত কর্মপ্রবাহের পরামর্শ

ফিঙ্গারপ্রিন্ট রেজিস্ট্রি সঠিক রাখুন

অন্তর্ভুক্ত উদাহরণগুলো থেকে রেজিস্ট্রি আগে থেকে পূরণ করবেন না। রিপোজিটরির EXAMPLES.md দেখায় একটি পূর্ণ রেজিস্ট্রি কেমন দেখতে এবং কোন আকৃতিগুলো পরস্পরের সঙ্গে সংঘর্ষে আসতে পারে, তবে এটি কোনো সীমাবদ্ধতার তালিকা নয়। নিজের প্রকল্পগুলো নথিভুক্ত করুন এবং চারটির মধ্যে ছয়টি ইউনিকনেস-শর্ত পূরণে ব্যর্থ যেকোনো নতুন ধারণা পুনরায় নকশা করুন।

সম্পদ একটি শীর্ষবিন্দুতে বরাদ্দ করুন

প্রতিটি দৃশ্যকে সমানভাবে তীব্র করার তাগিদ প্রতিরোধ করুন। সবচেয়ে শক্তিশালী অ্যাসেট, দীর্ঘতম স্ক্রল বিরতি এবং সবচেয়ে স্পষ্ট সূচনাপথ একটি শীর্ষবিন্দুর জন্য সংরক্ষণ করুন। একাধিক প্রতিদ্বন্দ্বী শীর্ষবিন্দু সামগ্রিক বক্ররেখাকে দুর্বল করে।

প্রতিক্রিয়াশীল ছন্দ সচেতনভাবে নকশা করুন

4px স্পেসিং ভিত্তি ব্যবহার করুন, তবে ডেস্কটপের মাপের ফাঁক সরাসরি ফোনে প্রয়োগ করবেন না। শিরোনামগুলোর পারস্পরিক সম্পর্ক স্পষ্ট রাখুন, পাঠযোগ্য লাইনের দৈর্ঘ্য বজায় রাখুন এবং গাঢ় পটভূমিতে হালকা লেখার ভারসাম্য শুধু একটি রঙ পরিবর্তনের মাধ্যমে নয়, আরও বিস্তৃতভাবে সমন্বয় করুন।

অনুমানের বদলে ডায়াগনস্টিক ওভাররাইড পছন্দ করুন

ভুল ffmpeg বা Chrome ইনস্টলেশন শনাক্ত হলে SCROLLCRAFT_FFMPEG অথবা SCROLLCRAFT_CHROME স্পষ্টভাবে সেট করুন। এরপর doctor.mjs আবার চালান, যাতে পরে এনকোডিং বা ব্রাউজার-সংক্রান্ত ত্রুটিগুলো আলাদাভাবে ডিবাগ করতে না হয়।

প্রকল্পের ইতিহাস পড়ুন

রিপোজিটরির CHANGELOG.md-তে বিল্ডের সময় কী ব্যর্থ হয়েছে এবং তার প্রতিক্রিয়ায় কোন নকশা বা প্রকৌশল-নিয়ম তৈরি হয়েছে, তা নথিভুক্ত আছে। এটি শুধু ফিচারের ইতিহাস নয়, পরিচালনাগত শিক্ষার একটি কার্যকর উৎস।

যেসব সীমাবদ্ধতা বিবেচনা করবেন

• অন্যান্য প্ল্যাটফর্মে প্রচলিত অবস্থানগুলো খোঁজার স্ক্রিপ্ট থাকা সত্ত্বেও সম্পন্ন বিল্ড কেবল Windows-এ চালানো হয়েছে।
• উৎপাদিত ভিডিওতে উল্লেখযোগ্য খরচ হতে পারে, বিশেষ করে অনেক ধাপবিশিষ্ট অবিচ্ছিন্ন-জগতের উড্ডয়নের ক্ষেত্রে।
• স্কিলটি ইচ্ছাকৃতভাবে মতামতনির্ভর; তাই পরিচিত লেআউট, রঙের প্যালেট বা দুর্বলভাবে সংজ্ঞায়িত শীর্ষবিন্দু প্রত্যাখ্যাত হতে পারে।
• স্বয়ংক্রিয় যাচাই সম্পূর্ণ পৃষ্ঠাটির অর্থবহতা বিচার করতে পারে না, তাই কনট্যাক্ট শিটটি এখনও মানুষের পর্যালোচনা প্রয়োজন।

উপসংহার

Scrollcraft একটি স্ক্রল-ইন্টারঅ্যাকশন ইঞ্জিনকে নিয়ন্ত্রিত নকশা-প্রক্রিয়ার সঙ্গে যুক্ত করে। প্রথমে Claude Code প্লাগইন ইনস্টল করুন, প্রিফ্লাইট চালান এবং একটি ওয়ার্কস্পেস তৈরি করুন। এরপর একটি ব্যাকরণ বেছে নিন, অনুভূতির বক্ররেখা ও একটি শীর্ষবিন্দু নির্ধারণ করুন, একটি অনন্য স্বাক্ষর-চাল তৈরি করুন এবং যাচাইপর্বকে যান্ত্রিক সমস্যাগুলো উন্মোচন করতে দিন। শেয়ার করা ইঞ্জিনটি অপরিবর্তিত রাখুন, যাতে প্রতিটি প্রকল্পের সেমান্টিক কাঠামো ও আর্ট ডিরেকশন সত্যিই স্বতন্ত্র থাকে।