Projects using CSS3 in Dhaka DivisionProjects using CSS3 in Dhaka DivisionNajar: Interactive Hero Section with Video Mask and Cursor Trail (https://<https://jsfiddle.net/Saminsami/tm6xjoch/4)
"A fashion brand landing page where text reveals video and the cursor leaves a trail of editorial images"
I built this hero section for a fashion brand called Najar. The main idea: the brand name acts as a mask that reveals video underneath, and when you move your cursor across the page, it leaves behind a trail of editorial fashion images.
The result is a landing page that feels alive. The text is not static. The cursor is not just a pointer. Everything moves.
WHAT I WAS BUILDING:
A text mask that clips video to the shape of the letters
A cursor trail that spawns images wherever the mouse moves
Smooth transitions so nothing feels jarring
The text mask works by using CSS clip-path or canvas compositing. The video plays inside the letter shapes, so you see motion through the typography. The cursor trail stores the last N mouse positions and places small images at each point, then fades them out over time.
THE TECHNICAL SIDE:
The page uses HTML, CSS, and JavaScript. No frameworks, no libraries.
The text mask is the core effect. I rendered the brand name on an offscreen canvas, then used that as a clipping mask for the video element. Every frame, the video draws only where the text pixels exist.
For the cursor trail, I tracked mouse movement with event listeners and stored positions in an array. Each position gets a small image element that fades out and removes itself after a short delay. The images are editorial fashion shots that match the brand feel.
The layout is minimal. Dark background, centered text, nothing else. All the attention goes to the interaction.
WHAT I LEARNED:
Canvas compositing is powerful but fiddly. Getting the text mask to update every frame without lag took some optimization.
The cursor trail needed throttling. Without it, too many images spawned on fast mouse moves and the page slowed down. I limited the spawn rate and capped the array length.
TRY IT YOURSELF: (https://<https://jsfiddle.net/Saminsami/tm6xjoch/4)
The full working example is on JSFiddle. Move your mouse around and watch the trail appear.
Built by Samin Sami | Developer & 3D Experimentation Shatabdi Vobo — Artist & Personal Blog Website
vobo.vercel.app (http://vobo.vercel.app)
A full personal website and content platform built for musician and writer Shatabdi Vobo, combining a music/media presence with a full-featured bilingual blog (Bengali content support built in). Key features:
Rich blog publishing system — a custom CMS editor with a continuous writing canvas where the client can drop in photos mid-post, each with its own caption, plus category tagging (poetry, lyrics, stories) with public filter buttons so readers can browse by type
Multi-media content hub — dedicated sections for Music, Vlog (YouTube-linked), Books, and E-books (readable directly on-site), each with its own landing page
Site-wide search — a dedicated search page covering blog posts, music, vlogs, books, and e-books together
Reader engagement features — reading time estimates, related-posts suggestions, shareable category links, and social/email sharing on individual posts
SEO & discoverability — sitemap, robots.txt, and consistent card-based layouts tuned for both readability and visual consistency
Support/donations page — integrated donation links (Patreon, bKash) so the client's audience can support their work directly
The site was refined through multiple rounds of client feedback — from restructuring navigation and homepage layout to fixing mobile UX bugs and widening the content grid — evolving into a polished, content-rich personal platform rather than a static portfolio.
Note: currently live on the vobo.vercel.app (http://vobo.vercel.app) subdomain — custom domain connection is pending on the client's side as the client is updating his work in website.
Stack: JavaScript, Firebase (Firestore + Storage CMS), Vercel 
