Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
3D হিরো সেকশনের জন্য সেরা AI স্কিল: কেন ২০২৬ সাল হবে এটি মূলধারায় আসার বছর
২০২৬ সালে 3D হিরো সেকশনের জন্য সেরা AI স্কিলগুলি Three.js সিন তৈরি করে যা আপনার ব্র্যান্ড অ্যাসেট রিয়েল-টাইমে রেন্ডার করে, ২ ঘণ্টার মধ্যে শিপিং সম্পন্ন করে এবং $৫,০০০ - $২০,০০০ ফ্রিল্যান্স কন্ট্রাক্ট প্রতিস্থাপন করে। একটি 3D ল্যান্ডিং পেজ হিরো পূর্বে একটি ত্রৈমাসিক ইঞ্জিনিয়ারিং প্রজেক্ট ছিল। এখন এটি শুক্রবার দুপুরের কাজ।
Linear, Stripe, Vercel, Arc, Rive, Liveblocks, এবং Cursor সবাই ২০২৩ থেকে ২০২৬ সালের মধ্যে তাদের ল্যান্ডিং পেজগুলি ইন্টারেক্টিভ 3D তে স্থানান্তরিত করেছে। Stripe এবং Vercel-এর কনভার্সন টিমগুলি নতুন ডিজাইনের পরে স্ক্রোল ডেপথ এবং সাইনআপ রেটে ডাবল-ডিজিট বৃদ্ধি রিপোর্ট করেছে। এই প্যাটার্নটি এখন প্রিমিয়াম SaaS-এর জন্য ডিফল্ট, এবং একটি ফ্ল্যাট হিরো এখন অফ-ট্রেন্ড বলে মনে হচ্ছে।
এই গাইডটি Vibe Skills এ আমরা ২০২৬ সালে সুপারিশ করছি এমন পাঁচটি ইন্টারেক্টিভ 3D হিরো স্কিল, প্রতিটির শিপিং এবং এই সপ্তাহে আপনার সাইটে একটি বাস্তব 3D হিরো কীভাবে স্থাপন করবেন তা কভার করে।
Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
কেন 3D হিরো এখন ডিফল্টভাবে "প্রিমিয়াম" নির্দেশ করে
একটি 3D হিরো হল নতুন "আমরা একটি সিরিয়াস কোম্পানি" সংকেত। পাঁচ বছর আগে সেই সংকেত ছিল একটি কাস্টম ইলাস্ট্রেশন। তিন বছর আগে এটি ছিল একটি Lottie অ্যানিমেশন। ২০২৬ সালে এটি একটি ইন্টারেক্টিভ 3D সিন যা ভিজিটর ঘোরানো, স্ক্রাব বা স্ক্রোল দিয়ে ট্রিগার করতে পারে।
এই পরিবর্তন ঘটেছে কারণ WebGL-এর খরচ কমে গেছে। react-three-fiber Three.js-কে React লেখার মতো অনুভূতি দিয়েছে। drei ৯০% কেস (অরবিট কন্ট্রোল, এনভায়রনমেন্ট ম্যাপ, GLTF লোডার, ইনস্ট্যান্সড মেশ) একটি-লাইনের কম্পোনেন্টে প্যাকেজ করেছে। Spline ডিজাইনারদের কোড ছাড়াই সিন তৈরি করতে দিয়েছে। "আমাদের 3D থাকা উচিত কিনা" থেকে "কেন আমাদের 3D নেই" পর্যন্ত বার উঠেছে।
বর্তমান ফ্রন্টিয়ার থেকে কিছু রেফারেন্স পয়েন্ট:
- Linear তাদের হোমপেজ হিরোতে কার্সার মুভমেন্টের প্রতিক্রিয়াশীল একটি 3D ইস্যু গ্রাফ ব্যবহার করে।
- Stripe একটি প্যারামেট্রিক 3D রিবন শিপ করে যা আপনি স্ক্রোল করার সাথে সাথে প্রতিটি সেকশনের জন্য অ্যানিমেট হয়।
- Vercel নেভিগেশনের প্রতিক্রিয়াশীল একটি ইনস্ট্যান্সড পার্টিকেল ফিল্ড চালায়।
- Arc হিরো হিসাবে একটি সম্পূর্ণ 3D ব্রাউজার প্রিভিউ তৈরি করেছে।
- Rive ফোল্ডের উপরে WebGL-এ ঘোরানো আসল প্রোডাক্ট ফাইল দেখায়।
ভিজিটররা সবসময় 3D সচেতনভাবে লক্ষ্য করে না। তারা লক্ষ্য করে যে পেজটি ব্যয়বহুল মনে হচ্ছে। সেই অনুভূতিই সাইন-আপ ক্লোজ করে।
কনভার্সন ডেটা এটি সমর্থন করে। একাধিক SaaS টিম যারা একটি ফ্ল্যাট ইলাস্ট্রেশনের পরিবর্তে একটি লো-পলি 3D হিরো ব্যবহার করেছে তারা সময়-অন-পেজে ৫ - ১৪% বৃদ্ধি এবং ট্রায়াল সাইনআপে ২ - ৬% বৃদ্ধি রিপোর্ট করেছে। এই বৃদ্ধি কোন জাদু নয়। এটি একটি সুন্দর পিচ ডেকের মতো একই মেকানিজম: পেজটি এমন লোকদের দ্বারা নির্মিত বলে মনে হয় যারা যত্নশীল, তাই পণ্যটি একই ভাবে মনে হয়।
আগে এর খরচ একটি বড় বাধা ছিল। একজন ফ্রিল্যান্স স্পেশালিস্টের কাছ থেকে একটি কাস্টম Three.js হিরোর খরচ $৫,০০০ - $২০,০০০ এবং এটি করতে ৩ - ৬ সপ্তাহ সময় লাগে। AI স্কিলগুলি এটি ২ ঘণ্টা এবং একটি সাবস্ক্রিপশনে কমিয়ে আনে।
Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
একটি চমৎকার 3D ল্যান্ডিং পেজ হিরোর অ্যানাটমি
একটি 3D হিরো কেবল "একটি বাক্সে একটি মডেল" নয়। একটি রূপান্তরকারী হিরোতে পাঁচটি স্তর থাকে এবং একটি AI স্কিলকে অবশ্যই এই পাঁচটি স্তরই শিপ করতে হবে যাতে আউটপুটটি Linear-গ্রেডের কাজের মতো অনুভব করে।
| স্তর | কি করে | কেন এটি গুরুত্বপূর্ণ | সাধারণ ভুল |
|---|---|---|---|
| মডেল | স্ক্রিনে 3D অবজেক্ট (লোগো, প্রোডাক্ট, অ্যাবস্ট্রাক্ট শেপ) | হুক। ভিজিটরের দেখা প্রথম জিনিস। | একটি স্টক মডেল ব্যবহার করা যা জেনেরিক দেখায় |
| আলো | এনভায়রনমেন্ট ম্যাপ + কী/ফিল লাইট | পৃষ্ঠকে বাস্তব উপাদানের মতো বিক্রি করে | ফ্ল্যাট অ্যাম্বিয়েন্ট লাইট যা গভীরতা নষ্ট করে |
| অ্যানিমেশন | ঘোরাঘুরি, স্ক্রোল-টাইড মুভমেন্ট, হোভার প্রতিক্রিয়া | সিনকে স্থিরের পরিবর্তে জীবন্ত মনে হয় | অটো-স্পিন লুপ যা স্ক্রিনসেভারের মতো দেখায় |
| ইন্টারেক্টিভিটি | কার্সার প্যারালাক্স, ক্লিক ট্রিগার, স্ক্রোল স্ক্রাব | ভিজিটরকে সিনে টেনে আনে | কোনও ইন্টারেক্টিভিটি নেই, তাই এটি ভিডিওর মতো মনে হয় |
| মোবাইল ফলব্যাক | টাচ ডিভাইসে স্থির চিত্র বা লো-পলি সংস্করণ | ৬০% ট্র্যাফিক মোবাইল - WebGL ব্যাটারি শেষ করে | মোবাইলে সম্পূর্ণ সিন শিপ করা এবং LCP নষ্ট করা |
একটি বাস্তব 3D হিরো স্কিল সমস্ত পাঁচটি স্তর শিপ করে। একটি খারাপটি কেবল একটি মডেল শিপ করে এবং এটিকে কাজ বলে মনে করে।
মোবাইল ফলব্যাক সবচেয়ে বড় অন্ধ স্পট। একটি মধ্য-রেঞ্জের অ্যান্ড্রয়েড ফোনে Three.js Largest Contentful Paint স্কোর ১.২ সেকেন্ড থেকে ৪.৮ সেকেন্ডে নামিয়ে আনতে পারে, যা Google "poor" হিসাবে ফ্ল্যাগ করে। সমাধানটি তিনটি প্যাটার্নের মধ্যে একটি:
১. স্থির পোস্টার: সিনটিকে একটি উচ্চ-মানের JPG/WEBP তে রেন্ডার করুন, এটিকে মোবাইল হিরো হিসাবে শিপ করুন, শুধুমাত্র pointer:fine এ লাইভ সিনে স্যুইচ করুন।
২. লো-পলি ভ্যারিয়েন্ট: মোবাইলে কোনও এনভায়রনমেন্ট ম্যাপ ছাড়াই মডেলের একটি ২০০-ট্রাই সংস্করণ শিপ করুন।
৩. লেজি-মাউন্ট: ব্যবহারকারী হিরো পেরিয়ে স্ক্রোল করার পরেই কেবল ক্যানভাস মাউন্ট করুন, যাতে প্রাথমিক পেইন্ট স্থির পোস্টার হয়।
প্রতিটি Vibe Skills 3D হিরো স্কিলের মধ্যে মোবাইল ফলব্যাক ডিফল্ট হিসাবে অন্তর্ভুক্ত থাকে, এটি কোনও afterthought নয়।
Vibe Skills-এ 3D হিরো সেকশনের জন্য ৫টি AI স্কিল
এগুলো হল পাঁচটি ইন্টারেক্টিভ 3D হিরো স্কিল যা আমরা ২০২৬ সালে সুপারিশ করি। সমস্ত Vibe Skills-এর ইন্টারেক্টিভ 3D ক্যাটাগরিতে লাইভ আছে এবং react-three-fiber কম্পোনেন্ট হিসাবে শিপ হয় যা Next.js, Remix, বা Astro প্রকল্পে ড্রপ করার জন্য প্রস্তুত।
১. Linear-স্টাইল ফ্লোটিং অবজেক্ট হিরো
"ফোল্ডের উপরে একটি একক হিরো অবজেক্ট ভাসমান" প্যাটার্ন। একটি লোগো বা প্রোডাক্ট মার্ক পাস করুন, স্কিলটি এটিকে GLTF হিসাবে রিগ করে, একটি ব্রাশড-মেটাল বা গ্লাস মেটেরিয়াল প্রয়োগ করে, রিম লাইটিং সেট আপ করে এবং কার্সার প্যারালাক্স যোগ করে যা মাউসের অবস্থান থেকে অবজেক্টটিকে ৬ ডিগ্রি হেলে দেয়।
উপযুক্ত: SaaS হোমপেজ, ডেভ টুল, ফিনটেক, Linear বা Arc-এর মতো মনে হতে চায় এমন যেকোনো কিছু।
আউটপুট: <Hero3D /> React কম্পোনেন্ট, GLTF মডেল, ১টি মোবাইল পোস্টার JPG।
শিপিং সময়: ইনপুট থেকে ডিপ্লয়মেন্ট পর্যন্ত ৯০ মিনিট।
২. Stripe-স্টাইল প্যারামেট্রিক রিবন
অ্যানিমেটেড রিবন / ওয়েভ / ফ্লো প্যাটার্ন যা প্রোডাক্টের আগে গতি বিক্রি করে। স্কিলটি একটি প্যারামেট্রিক মেশ (সাইন/কার্ল নয়েজ চালিত) তৈরি করে, আপনার ব্র্যান্ড কালারে একটি গ্রেডিয়েন্ট মেটেরিয়াল প্রয়োগ করে এবং অ্যানিমেশন ফেজকে স্ক্রোল পজিশনের সাথে সংযুক্ত করে যাতে ভিজিটর পৃষ্ঠার নীচে যাওয়ার সাথে সাথে রিবনটি মডিফাই হয়।
উপযুক্ত: পেমেন্টস, ইনফ্রাস্ট্রাকচার, API প্রোডাক্ট, যেকোনো পিচ যেখানে "মুভমেন্ট" মেটাফরের অংশ।
আউটপুট: <RibbonHero /> কম্পোনেন্ট স্ক্রোল-টাইড ইউনিফর্ম সহ, মোবাইল ফলব্যাক একটি স্থির গ্রেডিয়েন্ট ফ্রেম।
৩. পার্টিকেল ফিল্ড হিরো
কার্সার বা স্ক্রোলের প্রতিক্রিয়াশীল ইনস্ট্যান্সড পার্টিকেল / ডট ফিল্ড। স্কিলটি ৫,০০০ - ৫০,০০০ ইনস্ট্যান্সড মেশ (ডিভাইস টায়ার প্রতি সীমাবদ্ধ) স্থাপন করে, সেগুলোকে নয়েজ ফিল্ড দিয়ে চালিত করে এবং একটি কার্সার-অ্যাট্র্যাক্টর যোগ করে যাতে পার্টিকেলগুলি পয়েন্টারের চারপাশে সরে যায়।
উপযুক্ত: AI প্রোডাক্ট, ডেটা টুল, ইনফ্রাস্ট্রাকচার ব্র্যান্ড, "স্কেল" বা "বুদ্ধিমত্তা" বার্তা যেখানে প্রয়োজন।
আউটপুট: <ParticleHero /> অটো-কোয়ালিটি স্কেলিং সহ (৬০fps ধরে রাখতে দুর্বল জিপিইউগুলিতে পার্টিকেল সংখ্যা কমিয়ে দেয়)।
৪. প্রোডাক্ট 3D স্পিন হিরো
"ফোল্ডের উপরে আপনার আসল প্রোডাক্ট 3D তে ঘোরান" প্যাটার্ন। স্কিলটি আপনার সরবরাহ করা একটি GLTF (অথবা ইমেজ-টু-3D এর মাধ্যমে একটি একক প্রোডাক্ট রেন্ডার থেকে একটি লো-পলি সংস্করণ তৈরি করে), স্টুডিও লাইটিং প্রয়োগ করে এবং ভিজিটরকে ঘোরাতে বা নিষ্ক্রিয় অবস্থায় অটো-অরবিট করতে দেয়।
উপযুক্ত: হার্ডওয়্যার ব্র্যান্ড, ফিজিক্যাল প্রোডাক্ট, ই-কমার্স, ফ্যাশন, ডিজাইন টুল প্রিভিউ।
আউটপুট: <ProductHero /> <OrbitControls /> সহ ৬০ ডিগ্রি ক্ল্যাম্পের জন্য কনফিগার করা, সম্পূর্ণ মোবাইল জেসচার সমর্থন।
৫. স্ক্রোল-ড্রাইভেন সিন হিরো
পাঁচটির মধ্যে সবচেয়ে উচ্চাভিলাষী। একটি মাল্টি-স্টেজ 3D সিন যেখানে প্রতিটি স্ক্রোল পজিশন ক্যামেরা কোণ, আলো এবং সক্রিয় অবজেক্ট পরিবর্তন করে। Apple প্রোডাক্ট পেজ, Vercel-এর Edge Functions পেজ, এবং Liveblocks-এর Yjs পেজ দ্বারা ব্যবহৃত।
উপযুক্ত: প্রোডাক্ট লঞ্চ, ফিচার ডিপ ডাইভ, ফোল্ডের উপরে ৩-স্টেজ স্টোরি বলে এমন যেকোনো কিছু।
আউটপুট: <ScrollScene /> কম্পোনেন্ট react-three-fiber + @react-three/drei + Lenis স্মুথ স্ক্রোল-এর উপর নির্মিত, JSON-এ সম্পাদনাযোগ্য নেমড ক্যামেরা ওয়েপয়েন্ট সহ।
Vibe Skills-এ সমস্ত ইন্টারেক্টিভ 3D স্কিল ব্রাউজ করুন
২ ঘণ্টার কম সময়ে একটি 3D হিরো শিপ করার উপায়
"আমরা একটি 3D হিরো চাই" থেকে "এটি প্রোডাকশনে লাইভ" পর্যন্ত সম্পূর্ণ ওয়ার্কফ্লো। প্রথম ধাপ হল সর্বদা Vibe Skills-এ সঠিক স্কিল নির্বাচন করা - Three.js বয়লারপ্লেট লেখা দিয়ে শুরু করবেন না।
ধাপ ১: Vibe Skills-এ সঠিক স্কিল নির্বাচন করুন
Vibe Skills-এর ইন্টারেক্টিভ 3D ক্যাটাগরিতে যান এবং প্যাটার্নটি আপনার প্রোডাক্টের সাথে মেলান। SaaS ড্যাশবোর্ড প্রোডাক্ট Linear-স্টাইল ফ্লোটিং অবজেক্ট নির্বাচন করে। API/ইনফ্রা প্রোডাক্ট Stripe-স্টাইল রিবন নির্বাচন করে। হার্ডওয়্যার প্রোডাক্ট প্রোডাক্ট স্পিন নির্বাচন করে। AI প্রোডাক্ট পার্টিকেল ফিল্ড নির্বাচন করে। স্টোরিটেলিং লঞ্চ স্ক্রোল-ড্রাইভেন সিন নির্বাচন করে।
যদি আপনি নিশ্চিত না হন, Linear-স্টাইল ফ্লোটিং অবজেক্ট স্কিল হল সর্বনিম্ন ঝুঁকির ডিফল্ট। এটি ৭০% SaaS ল্যান্ডিং পেজের জন্য কাজ করে।
ধাপ ২: ইনপুটগুলি প্রদান করুন
Vibe Skills-এর প্রতিটি 3D হিরো স্কিল একই ছয়টি ইনপুট চায়:
- ব্র্যান্ড কালার (প্রাইমারি + ১টি অ্যাকসেন্ট, হেক্স কোড)
- লোগো বা হিরো মার্ক (SVG পছন্দনীয়, PNG গৃহীত)
- প্রোডাক্ট অ্যাসেট (GLTF, OBJ, বা প্রোডাক্ট রেন্ডার JPG যদি কোনও 3D ফাইল না থাকে)
- মুড রেফারেন্স (আপনার পছন্দের 3D অনুভূতির সাইটগুলির ১ - ৩টি URL)
- টেক স্ট্যাক (Next.js, Remix, Astro, প্লেইন Vite, ইত্যাদি)
- মোবাইল কৌশল (স্থির পোস্টার, লো-পলি, বা লেজি-মাউন্ট)
যদি আপনার কাছে GLTF না থাকে, তবে স্কিলটি একটি একক প্রোডাক্ট রেন্ডার থেকে স্বয়ংক্রিয়ভাবে একটি লো-পলি সংস্করণ তৈরি করে। যদি আপনার কাছে প্রোডাক্ট না থাকে, তবে এটি আপনার লোগো ব্যবহার করে।
ধাপ ৩: জেনারেট এবং প্রিভিউ করুন
স্কিলটি চলে এবং এটি তৈরি করে:
- একটি
react-three-fiberকম্পোনেন্ট (<Hero3D />বা অনুরূপ) - GLTF মডেল ফাইল
- একটি মোবাইল পোস্টার JPG/WEBP
- সঠিক GLTF লোডার হ্যান্ডলিংয়ের জন্য একটি
next.config.jsপ্যাচ - ইনস্টল কমান্ড সহ একটি README
Vibe Skills-এর লাইভ স্যান্ডবক্সে প্রিভিউ করুন। একটি রঙ পরিবর্তন করুন, একটি প্রপ স্যুইচ করুন, ফলাফল দেখুন।
ধাপ ৪: আপনার প্রকল্পে ড্রপ করুন
pnpm add three @react-three/fiber @react-three/drei
কম্পোনেন্টটি আপনার components/ ফোল্ডারে কপি করুন, GLTF টিকে public/3d/ ফোল্ডারে কপি করুন এবং আপনার হিরো সেকশনে কম্পোনেন্টটি ইম্পোর্ট করুন। স্কিলটি টাইপস্ক্রিপ্ট টাইপ শিপ করে এবং ট্রি-শেকযোগ্য।
ধাপ ৫: পারফরম্যান্স যাচাই করুন
ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই Lighthouse চালান। স্কিলের মোবাইল ফলব্যাক LCP ২.৫ সেকেন্ডের নিচে রাখতে পারার কথা। যদি আপনি কোনও রিগ্রেশন দেখেন, তবে মোবাইল কৌশল "লেজি-মাউন্ট" থেকে "স্থির পোস্টার"-এ স্যুইচ করুন।
ধাপ ৬: শিপ করুন
প্রথমবারের ব্যবহারকারীর জন্য মোট অতিক্রান্ত সময় (ধাপ ১ থেকে ডিপ্লয়মেন্ট): ৯০ - ১২০ মিনিট। যদি আপনি আগে একটি শিপ করে থাকেন তবে ৩০ - ৪৫ মিনিট।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
একটি 3D হিরো কি পারফরম্যান্সের জন্য খারাপ?
যদি এটি সঠিকভাবে তৈরি করা হয় তবে না। Vibe Skills-এর স্কিলগুলি একটি মোবাইল পোস্টার ফলব্যাক এবং লেজি-মাউন্ট ক্যানভাস সহ শিপ হয়, তাই হিরো প্রথম পেইন্ট ব্লক করে না। একটি সঠিকভাবে তৈরি 3D হিরো ইনস্টলের পরে বাস্তব-বিশ্বের Lighthouse স্কোর ডেস্কটপে ৯০+ এবং মোবাইলে ৮০+ থাকে, LCP ২.৫ সেকেন্ডের নিচে।
Three.js-এর জন্য JS বান্ডেলের আকার কত?
Three.js + react-three-fiber + drei আপনার বান্ডেলে আনুমানিক ১২০ - ১৮০ KB gzipped যোগ করে। এটি একটি বড় Lottie অ্যানিমেশনের সাথে তুলনীয় এবং বেশিরভাগ অ্যানালিটিক্স SDK-এর চেয়ে ছোট। এটিকে হিরো কম্পোনেন্টের পিছনে কোড-স্প্লিট করুন যাতে এটি কেবল তখনই লোড হয় যখন ভিজিটর সেই পৃষ্ঠায় পৌঁছায় যা আসলে 3D ব্যবহার করে।
আমার কি 3D মডেল ফাইল লাগবে নাকি AI স্কিল একটি তৈরি করবে?
উভয়ই কাজ করে। আপনার যদি GLTF, OBJ, বা FBX ফাইল থাকে, স্কিলটি এটি সরাসরি ব্যবহার করে। আপনার যদি কেবল একটি প্রোডাক্ট রেন্ডার বা আপনার লোগো থাকে, তবে স্কিলটি ইমেজ-টু-3D ব্যবহার করে আপনার জন্য একটি লো-পলি GLTF তৈরি করে (সাধারণত ২০০ - ২,০০০ ত্রিভুজ, ওয়েবের জন্য অপ্টিমাইজ করা)। ইমেজ-টু-3D অন্তর্ভুক্ত কোন স্কিলগুলি দেখতে ইন্টারেক্টিভ 3D স্কিলগুলি ব্রাউজ করুন।
মোবাইলের কী হবে? 3D কি ব্যাটারি শেষ করে দেবে না?
Vibe Skills-এর স্কিলগুলি এটি পরিচালনা করে। টাচ ডিভাইসগুলিতে ডিফল্ট আচরণ হল একটি উচ্চ-মানের স্থির পোস্টার, লাইভ 3D সিন কেবল হোভার করার পরে (যা টাচে কখনও ফায়ার করে না) বা ব্যবহারকারী ফোল্ডের অতীত স্ক্রোল করার পরে মাউন্ট হয়। আপনি একটি লো-পলি ভ্যারিয়েন্ট অপ্ট ইন করতে পারেন যা মোবাইলে ৩০fps-এ নগণ্য ব্যাটারি খরচ সহ চলে।
আমি কি Three.js লেখার পরিবর্তে Spline সিন ব্যবহার করতে পারি?
হ্যাঁ। Vibe Skills-এর দুটি ইন্টারেক্টিভ 3D স্কিল আপনি যদি নো-কোড সম্পাদক পছন্দ করেন তবে Spline ফরম্যাটে এক্সপোর্ট করে। ট্রেড-অফ হল বান্ডেলের আকার - Spline-এর রানটাইম ৩০০ - ৫০০ KB gzipped বনাম Three.js + r3f ১২০ - ১৮০ KB। একটি দ্রুত শিপিং করা মার্কেটিং সাইটের জন্য, র (raw) Three.js জেতে। একটি ডিজাইনার-নেতৃত্বাধীন পুনরাবৃত্তি লুপের জন্য, Spline জেতে।
AI-জেনারেটেড 3D হিরো কি জেনেরিক দেখাবে?
না - Vibe Skills-এর স্কিলগুলি মোশন ডিজাইনারদের দ্বারা তৈরি যারা প্রোডাকশন SaaS সাইটগুলির জন্য 3D হিরো শিপ করেছেন। AI আপনার ব্র্যান্ড অ্যাসেট, রঙ এবং কন্টেন্ট পূরণ করে যখন ভিজ্যুয়াল সিস্টেম, আলো সেটআপ এবং অ্যানিমেশন কার্ভগুলি হাতে তৈরি থাকে। কেনার আগে বাস্তব আউটপুট প্রিভিউ করতে ইন্টারেক্টিভ 3D ক্যাটাগরি ব্রাউজ করুন।
এটি Three.js ফ্রিল্যান্সার নিয়োগের সাথে কীভাবে তুলনা করে?
একজন ফ্রিল্যান্স Three.js স্পেশালিস্ট $৮০ - $২০০/ঘণ্টা নেয় এবং একটি হিরোর জন্য সাধারণত ৩০ - ৮০ ঘণ্টা সময় লাগে, যার মধ্যে রিভিশন অন্তর্ভুক্ত। এটি একটি হিরোর জন্য $২,৪০০ - $১৬,০০০, যার টার্নআরাউন্ড সময় ৩ - ৬ সপ্তাহ। একটি Vibe Skills সাবস্ক্রিপশন $৩৯/মাস থেকে শুরু হয় এবং ৯০ মিনিটে একটি হিরো শিপ করে। স্কিলটি প্রথম হিরোতেই নিজের দাম উসুল করে এবং আপনি শিপ করা প্রতিটি প্রোডাক্ট পেজ, প্রতিটি ক্যাম্পেইন ল্যান্ডিং এবং প্রতিটি মাইক্রোসাইটে এটি লাভ দিতে থাকে।
ইনস্টল করার পরে কি আমি জেনারেটেড কম্পোনেন্ট সম্পাদনা করতে পারি?
হ্যাঁ। আউটপুটটি প্লেইন টাইপস্ক্রিপ্ট + react-three-fiber। ফাইলটির মালিক আপনি। রঙ সম্পাদনা করুন, মেটেরিয়াল স্যুইচ করুন, অ্যানিমেশন কার্ভগুলি পুনরায় টিউন করুন, ক্যামেরা FOV পরিবর্তন করুন। স্কিলটি পরিষ্কার, মন্তব্যযুক্ত কোড শিপ করে, একটি ব্ল্যাক বক্স নয়।
কুইক CTA: স্ক্র্যাচ থেকে 3D হিরো তৈরি করা বন্ধ করুন
একটি 3D হিরো এখন ২০২৬ সালে প্রিমিয়াম SaaS-এর জন্য ডিফল্ট, ঠিক যেমন ২০২২ সালে Lottie অ্যানিমেশন ডিফল্ট ছিল। 3D হিরো শিপ করা দলগুলি সবাই Three.js স্পেশালিস্ট নিয়োগ করছে না - তারা AI স্কিল ইনস্টল করছে যা ২ ঘণ্টার কম সময়ে সম্পূর্ণ স্ট্যাক (মডেল, আলো, অ্যানিমেশন, ইন্টারেক্টিভিটি, মোবাইল ফলব্যাক) শিপ করে।
যদি আপনি $৮k ফ্রিল্যান্স কোট বা ব্যাকলগে থাকা ইঞ্জিনিয়ারিং টিকিটের কারণে 3D হিরো পিছিয়ে দিয়ে থাকেন, তবে আপনি আজ বিকেলে এটি শিপ করতে পারেন।
Vibe Skills-এ 3D হিরো স্কিলগুলি ব্রাউজ করুন →
- $৮,০০০ ফ্রিল্যান্স কোট এবং ৬ সপ্তাহের সময়সীমা এড়িয়ে যান। Vibe Skills-এ একটি 3D হিরো স্কিল ইনস্টল করুন।