✨ Built with AI + Next.js + Tailwind

AI Challenges

A collection of AI-powered UI/UX experiments. Exploring the boundaries of design intelligence with interactive 3D, shader effects, and generative interfaces.

Explore Challenges

Challenges

Each challenge pushes the limits of what AI-assisted development can create. Built with Next.js, Tailwind, and design intelligence.

🤖

AI-Powered

Conversational AI, generative design, and intelligent tools

#002

AI Chat Interface

A polished conversational UI powered by Groq (Llama 3.3 70B), with streaming responses, markdown rendering, and dark mode.

Groq APIStreaming

live

#003

Generative Design System

Type a brand description and watch an entire design system generate — colors, typography, components, layouts.

AI GenerationDesign System

live

#004

Prompt-to-UI Playground

Describe a UI component in natural language and see it rendered live with code export.

Code GenerationLive Preview

live

#016

AI Voice Chat

Talk to an AI using your microphone — speech recognition, Groq-powered responses, and text-to-speech playback.

VoiceWeb Speech API

live

#019

AI Road Trip Planner

Enter a starting point and let AI plan a multi-day road trip with an interactive map, stops, and activities.

Groq APIMaps

live

#021

Codebase Q&A

Drop a project folder and ask questions about the code — RAG retrieves relevant chunks and AI explains them.

RAGGroq API

live

#022

AI Photo Critic

Upload a photo and get an AI critique — composition, lighting, color, mood, and improvement suggestions.

Vision AIGroq API

live

🎮

Games

Classic and modern games with polished mechanics

#005

Tetris

A classic Tetris game with smooth animations, ghost pieces, hold queue, next piece preview, and responsive controls.

CanvasAnimation

live

#006

Wordle

The addictive word-guessing game with animated tile flips, keyboard tracking, and shareable results.

PuzzleShareable

live

#014

Snake

The classic snake game with gradient visuals, speed progression, high scores, and touch controls.

CanvasRetro

live

#015

Minesweeper

Classic minesweeper with 3 difficulty levels, flagging, auto-expand, timer, and mobile long-press support.

PuzzleStrategy

live

🌐

3D & Visual

Three.js worlds, shaders, and immersive experiences

#001

Interactive 3D Landing

A stunning landing page with real-time shader backgrounds, animated gradients, and smooth scroll interactions.

ShadersAnimation

live

#007

3D Solar System

Explore an interactive 3D solar system — orbit around planets, view facts, adjust speed, and discover moons.

Three.jsInteractive

live

#008

3D Particle Playground

Thousands of GPU-accelerated particles reacting to your mouse with adjustable gravity, turbulence, and color.

Three.jsGPU

live

#009

Interactive 3D Globe

A spinning Earth with data arcs between cities, atmosphere glow, and click-to-explore locations.

Three.jsData Viz

live

#010

Procedural Terrain

Infinite 3D terrain from noise functions with adjustable elevation, water level, and biome colors.

ProceduralShaders

live

#012

3D CSS Art Gallery

Walk through a virtual gallery using pure CSS 3D transforms with your challenge screenshots on the walls.

CSS 3DCreative

live

#013

3D Room Designer

Drag furniture into an interactive 3D room — change colors, rotate, scale, and customize walls and floors.

Three.jsInteractive

live

#023

Component Showcase

A curated page of animated UI components — aurora gradients, glassmorphism, geometric shapes, counters, and particle networks — generated with 21st.dev Magic MCP.

21st.devAnimation

live

🛠