PRODUCT DESIGN
UI/UX
VIBE CODING
AURAMANCER
AURAMANCER
AURAMANCER
An interactive aura photo booth that generates real-time procedural visualizations by analyzing emotional energy through AI-powered camera input.
ROLE
Designer & Developer
YEAR
2025
TIMELINE
6 WEEKS
01 — OVERVIEW
Auramancer bridges the mystical concept of auras with modern technology, creating an immersive experience that visualizes emotional and energetic states. The project combines computer vision, AI analysis, and procedural shader generation to produce unique, personalized visual representations in real-time.
Inspired by vintage aura photography and modern generative art, this installation invites participants to see themselves reflected through dynamic, flowing visual patterns that respond to their presence and emotional state.
The Challenge
Traditional aura photography relies on outdated technology and lacks the dynamic, personalized experience that modern audiences expect. The goal was to create an installation that felt both mystical and technologically sophisticated, generating truly unique visualizations for each participant.
Solution
Developed a custom pipeline that captures camera input, analyzes visual and contextual data through AI, and generates procedural shaders in real-time. Each visualization is unique, combining ShaderToy-style effects with personalized parameters derived from the participant's captured image.
02 — Development
Technical Stack
02 — Development
Technical Stack
Claude
Three.js
Procedural Shaders
AI Vision Mode
Canvas API
JavaScript
Real-time Rendering
WebGL / GLSL
Example of Generations based on aura
Process
01
Research & Concept
Explored the history of aura photography, mystical visualization systems, and contemporary generative art to establish a conceptual foundation.
02
Technical Architecture
Designed the pipeline connecting camera input, AI analysis, shader generation, and real-time rendering with Three.js and WebGL.
03
Shader Development
Created procedural GLSL shaders with dynamic parameters, incorporating fluid simulations, color gradients, and particle systems.
04
AI Integration
Implemented AI-powered analysis to extract emotional and aesthetic qualities from camera input, translating them into shader parameters.
Full Prototype Video Walkthrough
Key Features
Real-time Generation
Shaders are procedurally generated and rendered instantly, creating a responsive and engaging experience
AI-Powered Analysis
Computer vision models analyze captured images to determine color palettes, energy levels, and visual characteristics
Unique Visualizations
No two auras are the same—each shader combines personalized parameters with randomized elements
Performance Optimization
Efficient texture handling and shader compilation ensure smooth 60fps rendering even with complex effects
Real-time Generation
Shaders are procedurally generated and rendered instantly, creating a responsive and engaging experience
03 — OUTCOME
Technical Challenges
The most significant challenge was achieving smooth real-time performance while generating complex procedural shaders. Initial implementations experienced frame rate drops due to texture binding and shader compilation overhead. This required optimizing the render pipeline, implementing efficient texture caching, and carefully managing WebGL state changes.
Additionally, translating abstract AI analysis into meaningful visual parameters required extensive experimentation to find the right balance between interpretive accuracy and aesthetic appeal.
The most significant challenge was achieving smooth real-time performance while generating complex procedural shaders. Initial implementations experienced frame rate drops due to texture binding and shader compilation overhead. This required optimizing the render pipeline, implementing efficient texture caching, and carefully managing WebGL state changes.
Additionally, translating abstract AI analysis into meaningful visual parameters required extensive experimentation to find the right balance between interpretive accuracy and aesthetic appeal.
Results & Impact
Auramancer successfully creates an engaging intersection of technology and mysticism, offering participants a unique way to visualize their energetic presence. The project demonstrates the potential of combining AI analysis with real-time generative graphics to create personalized, meaningful experiences.
The installation serves as both an artistic statement and a technical achievement, pushing the boundaries of real-time shader generation and interactive design.
Auramancer successfully creates an engaging intersection of technology and mysticism, offering participants a unique way to visualize their energetic presence. The project demonstrates the potential of combining AI analysis with real-time generative graphics to create personalized, meaningful experiences.
The installation serves as both an artistic statement and a technical achievement, pushing the boundaries of real-time shader generation and interactive design.
01 — OVERVIEW
The Challenge
Create three cohesive card background graphics for PlayStation's Beta Program that align with PlayStation's established brand identity while maintaining visual consistency across all designs.
Solution
Developed a custom pipeline that captures camera input, analyzes visual and contextual data through AI, and generates procedural shaders in real-time. Each visualization is unique, combining ShaderToy-style effects with personalized parameters derived from the participant's captured image.
© 2026 designbyhem. All Rights Reserved.
01 — OVERVIEW
Auramancer bridges the mystical concept of auras with modern technology, creating an immersive experience that visualizes emotional and energetic states. The project combines computer vision, AI analysis, and procedural shader generation to produce unique, personalized visual representations in real-time.
Inspired by vintage aura photography and modern generative art, this installation invites participants to see themselves reflected through dynamic, flowing visual patterns that respond to their presence and emotional state.
The Challenge
Traditional aura photography relies on outdated technology and lacks the dynamic, personalized experience that modern audiences expect. The goal was to create an installation that felt both mystical and technologically sophisticated, generating truly unique visualizations for each participant.
Solution
Developed a custom pipeline that captures camera input, analyzes visual and contextual data through AI, and generates procedural shaders in real-time. Each visualization is unique, combining ShaderToy-style effects with personalized parameters derived from the participant's captured image.
02 — Development
Technical Stack
Claude
Three.js
Procedural Shaders
AI Vision Mode
Canvas API
JavaScript
Real-time Rendering
WebGL / GLSL
Process
01
Research & Concept
Explored the history of aura photography, mystical visualization systems, and contemporary generative art to establish a conceptual foundation.
02
Technical Architecture
Designed the pipeline connecting camera input, AI analysis, shader generation, and real-time rendering with Three.js and WebGL.
03
Shader Development
Created procedural GLSL shaders with dynamic parameters, incorporating fluid simulations, color gradients, and particle systems.
04
AI Integration
Implemented AI-powered analysis to extract emotional and aesthetic qualities from camera input, translating them into shader parameters.
Key Features
Real-time Generation
Shaders are procedurally generated and rendered instantly, creating a responsive and engaging experience
AI-Powered Analysis
Computer vision models analyze captured images to determine color palettes, energy levels, and visual characteristics
Unique Visualizations
No two auras are the same—each shader combines personalized parameters with randomized elements
Performance Optimization
Efficient texture handling and shader compilation ensure smooth 60fps rendering even with complex effects
03 — OUTCOME
Technical Challenges
The most significant challenge was achieving smooth real-time performance while generating complex procedural shaders. Initial implementations experienced frame rate drops due to texture binding and shader compilation overhead. This required optimizing the render pipeline, implementing efficient texture caching, and carefully managing WebGL state changes.
Additionally, translating abstract AI analysis into meaningful visual parameters required extensive experimentation to find the right balance between interpretive accuracy and aesthetic appeal.
Results & Impact
Auramancer successfully creates an engaging intersection of technology and mysticism, offering participants a unique way to visualize their energetic presence. The project demonstrates the potential of combining AI analysis with real-time generative graphics to create personalized, meaningful experiences.
The installation serves as both an artistic statement and a technical achievement, pushing the boundaries of real-time shader generation and interactive design.
© 2026 designbyhem. All Rights Reserved.
01 — OVERVIEW
Auramancer bridges the mystical concept of auras with modern technology, creating an immersive experience that visualizes emotional and energetic states. The project combines computer vision, AI analysis, and procedural shader generation to produce unique, personalized visual representations in real-time.
Inspired by vintage aura photography and modern generative art, this installation invites participants to see themselves reflected through dynamic, flowing visual patterns that respond to their presence and emotional state.
The Challenge
Traditional aura photography relies on outdated technology and lacks the dynamic, personalized experience that modern audiences expect. The goal was to create an installation that felt both mystical and technologically sophisticated, generating truly unique visualizations for each participant.
Solution
Developed a custom pipeline that captures camera input, analyzes visual and contextual data through AI, and generates procedural shaders in real-time. Each visualization is unique, combining ShaderToy-style effects with personalized parameters derived from the participant's captured image.
02 — Development
Technical Stack
Claude
Three.js
Procedural Shaders
AI Vision Mode
Canvas API
JavaScript
Real-time Rendering
WebGL / GLSL
Example of Generations based on aura
Process
01
Research & Concept
Explored the history of aura photography, mystical visualization systems, and contemporary generative art to establish a conceptual foundation.
02
Technical Architecture
Designed the pipeline connecting camera input, AI analysis, shader generation, and real-time rendering with Three.js and WebGL.
03
Shader Development
Created procedural GLSL shaders with dynamic parameters, incorporating fluid simulations, color gradients, and particle systems.
04
AI Integration
Implemented AI-powered analysis to extract emotional and aesthetic qualities from camera input, translating them into shader parameters.
Full Prototype Video Walkthrough
Key Features
Real-time Generation
Shaders are procedurally generated and rendered instantly, creating a responsive and engaging experience
AI-Powered Analysis
Computer vision models analyze captured images to determine color palettes, energy levels, and visual characteristics
Unique Visualizations
No two auras are the same—each shader combines personalized parameters with randomized elements
Performance Optimization
Efficient texture handling and shader compilation ensure smooth 60fps rendering even with complex effects
03 — OUTCOME
Technical Challenges
The most significant challenge was achieving smooth real-time performance while generating complex procedural shaders. Initial implementations experienced frame rate drops due to texture binding and shader compilation overhead. This required optimizing the render pipeline, implementing efficient texture caching, and carefully managing WebGL state changes.
Additionally, translating abstract AI analysis into meaningful visual parameters required extensive experimentation to find the right balance between interpretive accuracy and aesthetic appeal.
Results & Impact
Auramancer successfully creates an engaging intersection of technology and mysticism, offering participants a unique way to visualize their energetic presence. The project demonstrates the potential of combining AI analysis with real-time generative graphics to create personalized, meaningful experiences.
The installation serves as both an artistic statement and a technical achievement, pushing the boundaries of real-time shader generation and interactive design.
© 2026 designbyhem. All Rights Reserved.
Example of Generations based on aura