Iryna Koval
✨ Creative Developer ✨ WebGl ✨ Three.js ✨ AI integration
New to Contra
Iryna is ready for their next project!
VyzFlow - Music Visualization Web App
VyzFlow transforms audio into real-time 3D visual art — exportable as MP4 for social, YouTube, or broadcast.
Built solo from concept to production. Live at vyzflow.com (http://vyzflow.com).
What's inside:
WebGL shader background (simplex noise + mouse reactivity)
6 animated preset cards — raw WebGL contexts, custom GLSL fragment shaders per mood (Void, Bloom, Neon, Organic, Minimal, Particles)
Web Audio API — real-time bass/mid/treble analysis
3D particle sphere (5000 points) that reacts to the music
Geometry morphing — 5 shapes (sphere → cube → torus → icosahedron → torus knot) with GPU mix() interpolation
MP4 export via OffscreenRenderer + MediaRecorder + mp4-muxer — portrait, landscape, square
Supabase auth + export logging + admin panel
Cloudflare Turnstile bot protection
PWA + mobile-responsive
Email lead capture before export
Stack: Vite · Three.js · GLSL (vite-plugin-glsl) · Web Audio API · Supabase · Vercel · mp4-muxer
URL: https://vyzflow.com
(https://vyzflow.com)Want to help with development? Welcome)
0
33
Stop guessing your Claude AI limits. I built a macOS widget to keep my workflow seamless.
As a CGI Artist and Web Engineer, my daily stack involves a heavy mix of real-time graphics (Three.js/WebGL) and AI-driven automation. Tools like Claude are essential, but the unpredictable usage limits often disrupt the creative "flow state."
To solve this for myself and the community, I developed Claude Bar.
What is it? An elegant, transparent floating widget for macOS that tracks and displays your Claude.ai (http://Claude.ai) usage limits in real-time.
Key features:
* Real-time monitoring: No more manual checks on the Claude.ai (http://Claude.ai) settings page.
* Seamless Integration: Designed specifically for macOS to sit quietly in your workspace.
* Open Source: Built with Electron, utilizing a custom scraper for limit tracking.
But it is in Ukrainian, you can translate it into your language)
This tool ensures that technical constraints don't stand in the way of creative execution.
Check out the repository here: [link to https://github.com/vfxmajmuni/claude-bar]
I’d love to hear how you manage your AI tool quotas during deep work sessions!
0
63
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
93
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
108
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
111
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
112
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
205