Creative Development
Interactive websites and web experiences. Creative frontend development and motion design implementation with a focus on emotion and restraint.
Interactive websites/Creative frontend/Web experiences/Motion design
Creative Developer — Morocco
AkramRihani
I design and engineer immersive digital experiences — bold interfaces, WebGL scenes, and backend systems that perform.
01 — Transmission
Idesignandengineerdigitalexperiencesthatmovepeople.
From the backend domains that quietly hold a product together, to the WebGL surfaces that open a story — I build the full journey, and care about the last 1% of craft: timing, typography, performance.
Next — Capabilities
02 — Capabilities
A practice with range
From the creative surface to the systems underneath — each discipline is practised, not listed.
3D / WebGL
Real-time rendering with Three.js and React Three Fiber. Custom GLSL shaders and interactive scenes that stay fast on modest hardware.
Three.js/React Three Fiber/GLSL shaders/Real-time rendering
Motion & Interaction
Scroll choreography with GSAP and ScrollTrigger, micro-interactions and scrollytelling — motion that earns its place.
GSAP/ScrollTrigger/Lenis/Micro-interactions
Engineering
Production systems in React, Next.js and TypeScript. Clean APIs, performance budgets, accessibility, responsive architecture.
React / Next.js/TypeScript/API integration/Performance
03 — Selected Work
Case studies, not cards
01Hotel Experience
2025Palais Amghass
Frontend + Motion
A Moroccan palace hotel website where the guest journey is told with parallax and 3D scroll choreography — sticky scenes, scrubbed motion, reservation paths and a contact flow wired through API route handlers.
Next.js 16React 19TypeScriptTailwind v4
02Web Platform
2024WISLA
Backend Architecture
A modular athlete management platform built with Java 17 and Spring Boot 3, serving 20K+ daily users across multiple sports organisations.
Java 17Spring Boot 3Spring Security 6MySQL
03Web Experience
2023Interactive Portfolio
Design + Development
A high-performance Next.js portfolio featuring 3D WebGL visualisations, dynamic theming, and sub-100 Lighthouse scores across all routes.
Next.js 14TypeScriptThree.jsCSS Custom Properties
04 — Experience
The road so far
Self-taught, then contract, then platform architecture — every role informed the next.
2024
Backend Engineer
Independent
Architected WISLA athlete management platform with Java 17, Spring Boot 3, Spring Security 6 RBAC, and MySQL. Designed multi-tenant data isolation with discriminator-based strategies and row-level locking for concurrent scheduling.
2023
Full-Stack Developer
Independent
Built the Interactive Portfolio with Next.js 14, Three.js 3D visualisations, and dynamic theming via CSS custom properties. Achieved 98 Lighthouse performance across all routes with aggressive code-splitting.
2022
Full-Stack Developer
Contract
Built a high-throughput REST API serving 50k+ users with role-based access control and push notifications. Deployed on Docker with CI/CD pipelines; managed PostgreSQL and Redis-backed services on Linux infrastructure.
2021
Started Coding
Self-Taught
Built first full-stack application with Java and Spring Boot after months of self-study. Contributed to open-source projects and participated in hackathons. Published technical articles on backend architecture and API design.
05 — Process
Seven stations, one arc
A single through-line from first sketch to shipped site — each station hands off to the next.
- 01
Discover
Goals, constraints, content and the one thing this experience must communicate.
- 02
Design
Art direction, typography, a motion language, and clear visual hierarchy.
- 03
Prototype
Interactive prototypes that prove the interaction model early.
- 04
Develop
Component architecture, APIs, and the experience in code.
- 05
Animate
Scroll choreography, transitions, micro-interactions — sequenced, not scattered.
- 06
Optimize
Bundle budgets, 60fps, reduced motion, and honest performance.
- 07
Deploy
Review, test across devices, ship, and iterate.
06 — Technology
The tools, and why
Chosen for restraint, not collection — each one earns its place in the stack.
01
TypeScript
Typed end-to-end — data, props, contracts.
02
React
Component systems with predictable state.
03
Next.js
App Router, RSC boundaries, route-level splits.
04
Three.js
Custom scenes and shaders, kept lazy.
05
React Three Fiber
Declarative WebGL inside React.
06
GLSL
Hand-written fragment and vertex shaders.
07
GSAP
Scroll choreography and micro-interactions.
08
Lenis
Smooth scrolling with native fallbacks.
09
Tailwind CSS
A disciplined design-token layer.
10
Node.js
APIs, tooling and build pipelines.
11
Java
Spring Boot backends behind the scenes.
12
SQL
MySQL / PostgreSQL data modelling.
07 — Under the hood
Built with the engineer's restraint
01
Custom GLSL shaders
A hand-written 4-octave FBM aurora fragment shader drives the hero atmosphere — procedural, no textures.
02
Lazy WebGL engine
The Three.js chunk is fetched on demand, rendered at adaptive DPR, and freed the moment the hero leaves view.
03
Scroll-linked narrative
A single master timeline choreographs the manifesto — sharpening, emphasis, and exit are one motion.
04
Reduced motion, first
Every effect ships behind prefers-reduced-motion; content order never depends on a transition.
05
Performance discipline
Motion runs on transforms and opacity only — 60fps on mid-range hardware, ~87 kB shared JS.
06
Accessible by default
Semantic landmarks, skip link, keyboard-visible focus, and no hover-only interaction.
Every claim above is verifiable in this repository — run the build, inspect the shader, toggle reduced motion.
08 — Contact
Let's buildsomething memorable
Always open to interesting projects, collaborative conversations, and sharp challenges. Replies usually within 24 hours.