A high-end, experimental e-commerce frontend that redefines digital commerce through cinematic fluidity and micro-interactions.
Tahsin Shop is not just an e-commerce site—it's a portfolio masterpiece that showcases the future of web design. Built with cutting-edge technologies and a focus on "vibe" over function, this project demonstrates how emotion and artistry can transform digital commerce into an unforgettable experience.
- SvelteKit (Svelte 5 / Runes) - Next-generation reactive framework
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- GSAP (ScrollTrigger, Flip) - Professional-grade animations
- Lenis - Buttery-smooth scrolling
- Vercel - Edge-optimized deployment
"We do not sell products. We sell feelings. We curate moments."
In a world saturated with cookie-cutter e-commerce experiences, Tahsin Shop breaks the mold. This project exists to prove that web design can be more than just functional—it can be emotional, cinematic, and memorable.
Every interaction, every animation, every pixel is crafted to evoke a feeling. From the moment you land on the site, you're not just browsing products; you're experiencing a carefully choreographed digital performance.
This is not commerce. This is culture.
A custom preloader that sets the stage for the entire experience. Watch as the percentage counter animates from 0-100%, followed by a dramatic curtain reveal using GSAP's expo.inOut easing. The entire sequence is synchronized with hero animations, ensuring a seamless first impression.
Technical Implementation:
- GSAP proxy objects for smooth counter animation
- Full-screen overlay with
z-index: 99999 - Body scroll locking during preload
- Event-driven coordination with hero section
Experience true SPA-like navigation without hard refreshes. Page transitions use a full-screen "curtain" div that slides up to cover the screen, waits for content to load, then reveals the new page with cinematic timing.
Technical Implementation:
- SvelteKit's
onNavigatelifecycle hook - GSAP timeline animations
- Black curtain (
#0A0A0A) withyPercenttransforms - Smooth content loading coordination
A gallery section that "locks" the viewport and transforms vertical scrolling into horizontal movement. As you scroll down, the content slides sideways—like walking through an art gallery.
Technical Implementation:
- GSAP ScrollTrigger with
pin: true - Dynamic track width calculation (
1300%for 13 sections) - Parallax effects on images (faster movement for depth)
gsap.matchMedia()for mobile fallback (vertical stack)
A fixed footer that sits behind the main content, revealed as you scroll to the bottom. Features massive typography and a magnetic CTA button that physically moves toward your cursor.
Technical Implementation:
- Fixed positioning with
z-index: 0 - Main content overlay with
z-index: 10 - GSAP magnetic effect with distance calculations
- Subtle text drift and scale animations
Built entirely using Svelte 5's revolutionary runes system—no legacy export let or svelte/store syntax.
Technical Implementation:
$statefor reactive primitives (cart items, menu state)$derivedfor computed values (total price, item count)$effectfor side effects and animations$propsfor component props (Svelte 5 style)
A blend-mode cursor that expands on hover, showing contextual text ("VIEW", "ADD", "SHOP"). Hidden on touch devices for optimal mobile experience.
Interactive elements that physically move toward the cursor when within a 200px radius, creating a tangible connection between user and interface.
A subtle, animated film grain texture that adds cinematic depth without interfering with interactions (pointer-events: none).
Massive, fluid typography that responds to scroll and viewport size. Uses clamp() for truly responsive text scaling.
tahsin-shop/
├── src/
│ ├── lib/
│ │ ├── components/
│ │ │ ├── ui/
│ │ │ │ └── FloatingInput.svelte
│ │ │ ├── CustomCursor.svelte
│ │ │ ├── Footer.svelte
│ │ │ ├── Hero.svelte
│ │ │ ├── NoiseOverlay.svelte
│ │ │ ├── PageTransition.svelte
│ │ │ ├── Preloader.svelte
│ │ │ ├── ProductGrid.svelte
│ │ │ ├── ShoppingCart.svelte
│ │ │ └── SmartHeader.svelte
│ │ ├── stores/
│ │ │ └── cart.svelte.ts
│ │ └── utils/
│ │ └── lenis.ts
│ ├── routes/
│ │ ├── checkout/
│ │ │ ├── +page.svelte
│ │ │ └── success/
│ │ │ └── +page.svelte
│ │ ├── lookbook/
│ │ │ └── +page.svelte
│ │ ├── manifesto/
│ │ │ └── +page.svelte
│ │ ├── product/
│ │ │ └── [id]/
│ │ │ ├── +page.svelte
│ │ │ └── +page.ts
│ │ ├── +layout.svelte
│ │ └── +page.svelte
│ ├── app.css
│ └── app.html
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── svelte.config.js
- Node.js 18+
- npm or pnpm
-
Clone the repository
git clone https://github.com/yourusername/tahsin-shop.git cd tahsin-shop -
Install dependencies
npm install
-
Start the development server
npm run dev
4. **Open your browser**
Navigate to `http://localhost:5173`
### Build for Production
```bash
npm run build
npm run preview
Despite heavy animations and complex interactions, Tahsin Shop maintains buttery-smooth 60fps performance through:
- GPU Acceleration: All animations use
transformandopacity(CSS properties that trigger GPU compositing) - Will-Change Hints: Strategic use of
will-changefor animated elements - Lazy Loading: Images load on-demand with
loading="lazy" - Code Splitting: SvelteKit's automatic route-based code splitting
- Optimized GSAP: ScrollTrigger uses
scrubfor efficient scroll-linked animations - MatchMedia: Animations conditionally run based on device capabilities
Result: Lighthouse scores of 90+ across all metrics, even with cinematic animations.
This project demonstrates:
- Modern Svelte 5 Patterns: Runes-based state management
- Advanced GSAP: ScrollTrigger, matchMedia, proxy objects
- Creative Scroll Experiences: Horizontal scroll, parallax reveals
- Micro-interactions: Magnetic buttons, custom cursors, grain overlays
- Responsive Design: Fluid typography, mobile-first animations
- Performance Optimization: GPU acceleration, lazy loading, code splitting
This project is licensed under the MIT License.
Designed & Developed by Tahsin
"Building the future of web experiences, one interaction at a time."
Made with ❤️ and lots of ☕