LEACB में हर एनिमेशन का एक मक़सद है। कोई चीज़ बस हिलने के लिए नहीं हिलती। बीच का टोरस नॉट लगातार सीखने का प्रतीक है — एक अनंत गाँठ, जिसका न आदि है न अंत। तैरती जियोमेट्रिक आकृतियाँ उन अलग-अलग क्षेत्रों को दर्शाती हैं जिनमें मैं काम करता हूँ: सिस्टम, ग्राफ़िक्स, वेब, डिज़ाइन।
Every animation in LEACB serves a purpose. Nothing moves just to move. The torus knot at the center represents continuous learning — an eternal knot with no beginning or end. The floating geometric shapes represent the different disciplines I work across: systems, graphics, web, design.
डिज़ाइन का सिद्धांत सीधा है: गति ध्यान की दिशा तय करे, जगह का एहसास दे, और भावना जगाए। अगर कोई एनिमेशन इनमें से एक भी काम नहीं करता, तो वह हट जाता है।
The design principle is simple: motion should guide attention, provide spatial context, and create emotional resonance. If an animation doesn't do at least one of these, it gets cut.
LEACB का 3D सीन एक कसे हुए लूप पर चलता है: जियोमेट्री बनाना, पार्टिकल सिस्टम,
लाइटिंग, फिर पोस्ट-प्रोसेसिंग। EffectComposer RenderPass को
UnrealBloomPass से जोड़ता है, जो चमकीले पिक्सल पर कई चरणों वाला गाउसियन ब्लर लगाता है।
नतीजा — हर किनारे और चमकती सतह पर वही ख़ास साइ-फ़ाई चमक।
LEACB's 3D scene runs on a tight loop: geometry creation, particle systems,
lighting, then post-processing. The EffectComposer chains RenderPass into
UnrealBloomPass, which applies a multi-pass Gaussian blur to bright pixels. The result
is that signature sci-fi glow on every edge and emissive surface.
ब्लूम के पैरामीटर बड़े ध्यान से तय किए गए हैं: strength 0.65, radius 0.35, threshold 0.82। ब्लूम ज़्यादा हो तो सब गँदला लगता है। कम हो तो सपाट। यह सही जगह ढूँढने में दर्जनों कोशिशें लगीं।
Bloom parameters are carefully tuned: strength 0.65, radius 0.35, threshold 0.82. Too much bloom and everything looks muddy. Too little and it feels flat. Finding the sweet spot took dozens of iterations.
सीन में पाँच मुख्य ऑब्जेक्ट चक्कर लगाते और घूमते हैं:
Five primary objects orbit and rotate in the scene:
हर ऑब्जेक्ट की कई अक्षों पर अलग घूमने की रफ़्तार है, साथ में साइन-आधारित स्थिति बदलाव भी, जिससे वे सहज ढंग से बहते लगते हैं। कोई दो फ़्रेम एक जैसे नहीं दिखते।
Each object has independent rotation speeds across multiple axes, plus sinusoidal position offsets that make them drift organically. No two frames look identical.
पाँच रंगों के पैलेट से भरे 3000 पार्टिकल: सियान, बैंगनी, नीला, गुलाबी और सफ़ेद। ये एडिटिव ब्लेंडिंग इस्तेमाल करते हैं, इसलिए ऊपर-नीचे पड़ने वाले पार्टिकल एक-दूसरे को ढकने के बजाय ज़्यादा चमकीले धब्बे बनाते हैं। एक साँस जैसा असर साइन तरंग से Y स्थिति को हल्का खिसकाता रहता है, जिससे पूरा पार्टिकल क्षेत्र ज़िंदा लगता है।
3000 particles filled with 5-color palette: cyan, purple, blue, pink, and white. They use additive blending so overlapping particles create brighter spots instead of occluding each other. A breathing effect subtly shifts Y positions using a sine wave, making the entire particle field feel alive.
नेविगेशन पैनल — परिचय, प्रोजेक्ट्स, स्किल्स, ब्लॉग, प्लेग्राउंड, संपर्क — 3D जगह
में तैरते हैं। हर पैनल तीनों अक्षों पर मिश्रित साइन गति से तैरता है। माउस के पास आने पर वे 22% बड़े हो
जाते हैं, चमक और किनारों की रोशनी बढ़ जाती है। ट्रांज़िशन में lerp से मक्खन जैसी सहजता
आती है।
The navigation panels — About, Projects, Skills, Blog, Playground, Contact —
hover in 3D space. Each panel floats using compound sinusoidal motion on all three axes. On mouse
hover, they scale up 22% with increased emissive glow and edge brightness. The transitions use
lerp for buttery-smooth interpolation.
पैनल की टेक्स्चर canvas पर बनती हैं — स्कैनलाइन, कोने के ब्रैकेट,
चमक के ग्रेडिएंट और स्टेटस संकेतक सहित। सब कुछ प्रोग्राम से बनता है — कोई टेक्स्चर फ़ाइल नहीं चाहिए।
Panel textures are generated on canvas with scanlines, corner
brackets, glow gradients, and status indicators. It's all programmatic — no texture files needed.
3D सीन के ऊपर CSS 2D UI के एनिमेशन सँभालता है: शीर्षकों पर ग्लिच इफ़ेक्ट, हर ट्रांज़िशन पर cubic-bezier ईज़िंग, ग्लास-मॉर्फ़िज़्म के लिए backdrop-filter ब्लर, और लोडिंग सीक्वेंस के लिए कीफ़्रेम एनिमेशन। दोनों लेयर — WebGL और CSS — कभी आपस में नहीं टकराती, क्योंकि 3D कैनवस z-index 1 पर सबके पीछे बैठा रहता है।
On top of the 3D scene, CSS handles the 2D UI animations: glitch effects on titles, cubic-bezier easing on every transition, backdrop-filter blur for glass-morphism, and keyframe animations for loading sequences. The two layers — WebGL and CSS — never fight each other because the 3D canvas sits behind everything at z-index 1.
“एनिमेशन सजावट नहीं है। एनिमेशन संवाद है।”
"Animation is not decoration. Animation is communication."