Curated portfolio showcase for production-grade WebGL, Three.js, GLSL Shader, and Kinetic Typography Framer Smart Components created by Shakil Ur Rehman.
- Framer Profile: framer.com/@shakil-ur-rehman
- Live Local Showcase:
http://localhost:5173/
| # | Component | Category | Tech Stack | Live Framer URL |
|---|---|---|---|---|
| 01 | Scroll Bloom | 3D & WebGL | Three.js, WebGL, GLSL Shaders | sparkly-guardrails-519488.framer.app |
| 02 | Cascade Drift | Interactive UI | Framer Motion, Spring Physics | just-answers-330126.framer.app |
| 03 | Chat Popup | Interactive UI | Micro-Interactions, Layout Morphing | friendly-words-866774.framer.app |
| 04 | Ghost Text | Kinetic Typography | Canvas 2D, Perlin Noise Field | cooperative-daffodil-879209.framer.app |
| 05 | Bookscape Gallery | 3D & WebGL | Three.js, 3D Spatial Mesh | communicative-badger-693044.framer.app |
| 06 | Pixel-Burst Slider | Shader Effects | GLSL Shaders, Voxel Dispersion | serious-artboard-538422.framer.app |
| 07 | Quantum Mesh | 3D & WebGL | Three.js, Simplex Noise, BufferGeometry | innocent-audience-567796.framer.app |
| 08 | Ocean Scroll Shader | Shader Effects | GLSL Gerstner Waves, Fresnel Reflectance | serene-project-438662.framer.app |
| 09 | Spinning Text | Kinetic Typography | SVG textPath, Angular Momentum | optimistic-branding-983989.framer.app |
| 10 | Smart AI Support | Interactive UI | Canvas Neural Orb, Streaming Interface | organic-llama-152507.framer.app |
- High-Key Architectural Light Theme: High-contrast editorial aesthetic with porcelain cards, fine hairline borders, clean typography (
Space Grotesk,Plus Jakarta Sans,JetBrains Mono), and strictly no distracting emojis. - Ambient WebGL Background: Interactive 3D undulating grid and floating particles that react to cursor movement without taxing CPU/GPU.
- Realtime 60 FPS Micro-Canvases: Custom interactive canvas visualizers for each component directly in the gallery cards.
- Live Device Simulator & Preview Modal: Click any component to open the interactive simulator with Desktop (1200px), Tablet (768px), and Mobile (390px) viewports, hot-reload, and direct link launcher.
- Architecture & Telemetry Specs: Full technical breakdowns, frame budgets, package sizes, and Framer remixed integration guidelines.
- Search & Category Filtering: Instant search across titles, descriptions, and tech stacks, plus view switching between Grid cards and Editorial List.
# Navigate to the folder
cd d:/Projects/framer-showcase
# Install dependencies (if not already installed)
npm install
# Start development server
npm run dev
# Build for production
npm run build