Iryna Koval
✨ Creative Developer ✨ WebGl ✨ Three.js ✨ AI integration
New to Contra
Iryna is ready for their next project!
Follow the White Rabbit — AI Tarot Oracle Web App
A full-stack WebGL + AI tarot experience with user accounts, gamification, and n8n automation. Built from scratch.
Follow the White Rabbit is a production-grade interactive web application I designed and built end-to-end — from concept to live deployment.
It's an AI-powered tarot oracle that combines WebGL visuals, real-time AI card readings, user authentication, a gamification system, and automated workflows. Not a template. Not a no-code tool. Every line written from scratch.
What it does
Users arrive to an animated WebGL scene, authenticate via Google, and receive personalized AI tarot readings. Each reading is generated in real time by an AI model, tailored to the user's birth data, name, and chosen question.
A gamification layer rewards daily engagement with Oracle Carrots — a virtual currency earned through consistency. Users build a personal profile ("The Blueprint") with numerology, life path numbers, and astrological ascendant.
Technical stack
Frontend: Vanilla JS + WebGL (Three.js), GSAP animations, custom CSS
Backend: Supabase (PostgreSQL database + Google Auth)
AI: LLM model — real-time reading generation
Automation: n8n workflows for user events and notifications
Deploy: Vercel (custom domain, instant CI/CD)
What makes it complex
This isn't a landing page with a particle effect. It's a full product:
WebGL rabbit character with animated states (idle, loading, reveal)
Real-time AI integration — each reading is unique, context-aware, personalized
Supabase database storing reading history, carrot balance, user profiles
Google OAuth authentication flow
Gamification logic — streak tracking, daily limits, carrot economy
Numerology engine — calculates Life Path, Expression, Soul Urge numbers from birth data
Responsive + rotation lock — landscape-only mode with animated prompt
Sound design — ambient audio with mute toggle
Privacy Policy, Terms of Service, Refund Policy — production-ready legal pages
Timeline & scope
Solo build. Concept → live product in 8 weeks.
Live project
🔗 followthewhiterabbit.cards (http://followthewhiterabbit.cards)
0
48
Routine — Daily Self-Care Tracker
Live (in Ukrainian): https://routine-tan.vercel.app
A mobile-first PWA for tracking daily self-care rituals — the small things that get lost when work takes over.
Built with Vite and Vanilla JS, no frameworks. Data lives in localStorage, so it's fully private and works offline. Installs to your phone home screen as a PWA.
Three views:
Today — tasks grouped by category (Body, Mind, Skin, Anti-habits) with a live progress bar
Stats — weekly heatmap, current streak, and honest insights into what you always do vs. always skip
Rituals — edit, reorder, and recategorize your habits
What makes it interesting technically: the entire design was prototyped in Claude Design (Anthropic's new tool, launched April 2026) in a single prompt — three screens, correct color palette, component structure. The HTML export became the design reference handed to Claude Code for implementation. Zero Figma, zero manual mockups.
Share feature: generates a 1080×1080 canvas card of your daily progress, exports via Web Share API on mobile.
Stack: Vite · Vanilla JS · CSS Variables · localStorage · PWA · Canvas API · Web Share API
Design workflow: Claude Design → standalone HTML export → Claude Code implementation
Working time - 2 hours
0
72
PULSE — AI Analytics SaaS Landing Page
A concept landing page for an AI-powered analytics platform built with Three.js, GSAP, and Vite.
The hero features a 2,000-particle WebGL sphere with real-time mouse parallax. As the user scrolls, a smaller particle ball detaches from the hero and travels across sections — shifting color, dissolving into a background halo under the pricing cards, then reassembling. Built on a separate overlay renderer with a static camera and viewport-fraction coordinates to keep positioning pixel-perfect across all screen sizes.
Stack: Three.js · GSAP ScrollTrigger · Vite · Vanilla JS
0
74
Just shipped a product site for Pauline's — a Ukrainian manufacturer of natural massage candles.
The goal: make the product feel tangible through the screen.
What's inside:
— Realistic fire and smoke built with a particle shader. Each flame is alive, flickering with its own physics
— An oil drop that's born at the candle tip and migrates all the way down the page as you scroll. Getting a smooth sphere-to-teardrop morph without visual seams meant digging into SDF math (signed distance functions). Worth every hour.
— 15 scents as interactive 3D lid cards
— Oil composition, properties, and care tips
Stack: Three.js + GSAP ScrollTrigger + Canvas 2D + Vite → Vercel
https://massage.paulinescandle.com/
#WebGL (https://www.linkedin.com/search/results/all/?keywords=%23webgl&origin=HASH_TAG_FROM_FEED) #ThreeJS (https://www.linkedin.com/search/results/all/?keywords=%23threejs&origin=HASH_TAG_FROM_FEED) #GSAP (https://www.linkedin.com/search/results/all/?keywords=%23gsap&origin=HASH_TAG_FROM_FEED) #CreativeCoding (https://www.linkedin.com/search/results/all/?keywords=%23creativecoding&origin=HASH_TAG_FROM_FEED) #Frontend (https://www.linkedin.com/search/results/all/?keywords=%23frontend&origin=HASH_TAG_FROM_FEED)
0
77
Follow the White Rabbit: A 3D Journey into Self-Discovery
«Follow the White Rabbit» is more than a digital game; it’s an immersive ecosystem for self-reflection. It doesn’t aim to give all the answers - instead, it challenges users to think critically and ask the right questions. Inspired by the surrealism of Salvador Dalí and the whimsical mystery of Alice in Wonderland, this project merges ancient archetypes with cutting-edge web technology.
1
1
167