Unicorn Studio + WebGL/3D Web Dev
Unicorn Studio Overview
Browser-based no-code WebGL tool for interactive visuals, 2D/3D effects, animations. Export as images, videos, or embeddable WebGL scenes.
Workflow:
- Create project (artboard canvas)
- Import assets (images, videos, logos, shapes, 3D primitives)
- Add/position layers (images, shapes, text, video)
- Apply effects from Effects panel → adjust parameters → stack effects
- Add motion (time-based) and interactivity (hover, scroll, cursor, timeline)
- Export: static/video OR embeddable code/SDK for Framer, Webflow, Wix, Three.js
Effects Taxonomy
| Category |
What it does |
Code equivalent |
| Filters |
Color manipulation, tints, contrast, saturation, grading |
Fragment shader color ops, post-processing |
| Distortion |
Warps, displacements, waves, noise, refraction |
Displacement shaders, vertex deformation |
| Blur |
Gaussian, directional, zoom, bokeh |
Multi-pass Gaussian blur nodes |
| Lighting |
Simulated lights, glow, highlights, rim |
PBR lighting, custom BRDF |
| Stylize |
Halftone, posterize, grain, glitch, edge detect |
Custom fragment shaders |
| Misc |
Experimental effects |
— |
| Custom |
User-defined shaders |
GLSL/TSL extensions |
Integration Patterns
Pattern 1: Visual shader editor for hero sections
- Design in Unicorn → embed in React/Next/Framer/Webflow
- Use for cards, transitions, section backgrounds
Pattern 2: 2D WebGL FX layer
- Unicorn handles parallax, lighting, distortions on top of standard layout
- Deep 3D (full environments) stays in custom Three.js/R3F
Pattern 3: Rapid prototyping
- Designers iterate look in Unicorn
- Devs replicate/extend in GLSL/TSL/WebGPU where needed
Three.js Core Concepts
Scene structure: Scene → Camera → Mesh (Geometry + Material) → Renderer
Lighting types:
AmbientLight: Uniform fill, no shadowsDirectionalLight: Parallel "sunlight", casts shadowsPointLight: Omnidirectional from point, falloffSpotLight: Cone-shaped, focused highlightsHemisphereLight: Sky/ground gradient
Materials:
- PBR: baseColor, metalness, roughness, normal, AO
- Unlit: Ignores scene lighting (UI, toon, FX)
- Custom: Your own BRDF/stylized lighting
Shader Fundamentals
Vertex shader: Positions vertices, deforms geometry (waves, wobble, displacement)
Fragment shader: Computes pixel color (lighting, shading, effects)
Common patterns:
- Gaussian blur: Double render-pass softening
- Fresnel: View-angle rim highlight (glow, outlines)
- Cel/toon: Quantized light bands
- Displacement: Texture/math moves vertices
Languages:
- GLSL: C-like, WebGL standard
- TSL: Node-based, generates shaders (WebGPU)
Scroll + Interaction Stack
GSAP:
- Timeline: Sequenced animations, scrubbed by scroll/time
- ScrollTrigger: Links scroll position to timeline progress
- Easing: Acceleration curves (power, easeInOut)
Lenis: Smooth scroll library, feeds delta to GSAP + render loop
Scroll-driven camera: Camera position/rotation/FOV updated by scroll progress
Best practices:
- Dedicated render loop + smooth scroll delta (Lenis)
- Drive shader uniforms (time, intensity, distortionAmount) from GSAP timelines
- Combine custom shaders + scroll camera + UI text animation in cohesive hero
Quick Reference
See references/glossary.json for term definitions and code mappings.
See references/workflows.md for step-by-step implementation guides:
- Scroll-driven 3D hero
- Unicorn embed in Next.js
- Custom shader + GSAP integration
1---2name: unicorn-webgl3description: WebGL/3D web development with Unicorn Studio, Three.js, shaders, and scroll-driven interactions. TRIGGERS: Unicorn Studio, WebGL effects, Three.js, shaders, GLSL, scroll-driven 3D, GSAP ScrollTrigger, Lenis, hero animations, interactive visuals, distortion effects, blur effects, lighting effects, PBR materials, fragment shaders, vertex shaders, post-processing, Framer/Webflow embeds, immersive web experiences.4---5
6# Unicorn Studio + WebGL/3D Web Dev
7
8## Unicorn Studio Overview
9
10Browser-based no-code WebGL tool for interactive visuals, 2D/3D effects, animations. Export as images, videos, or embeddable WebGL scenes.
11
12**Workflow:**
131. Create project (artboard canvas)
142. Import assets (images, videos, logos, shapes, 3D primitives)
153. Add/position layers (images, shapes, text, video)
164. Apply effects from Effects panel → adjust parameters → stack effects
175. Add motion (time-based) and interactivity (hover, scroll, cursor, timeline)
186. Export: static/video OR embeddable code/SDK for Framer, Webflow, Wix, Three.js
19
20## Effects Taxonomy
21
22| Category | What it does | Code equivalent |
23|----------|--------------|-----------------|
24| **Filters** | Color manipulation, tints, contrast, saturation, grading | Fragment shader color ops, post-processing |
25| **Distortion** | Warps, displacements, waves, noise, refraction | Displacement shaders, vertex deformation |
26| **Blur** | Gaussian, directional, zoom, bokeh | Multi-pass Gaussian blur nodes |
27| **Lighting** | Simulated lights, glow, highlights, rim | PBR lighting, custom BRDF |
28| **Stylize** | Halftone, posterize, grain, glitch, edge detect | Custom fragment shaders |
29| **Misc** | Experimental effects | — |
30| **Custom** | User-defined shaders | GLSL/TSL extensions |
31
32## Integration Patterns
33
34**Pattern 1: Visual shader editor for hero sections**
35- Design in Unicorn → embed in React/Next/Framer/Webflow
36- Use for cards, transitions, section backgrounds
37
38**Pattern 2: 2D WebGL FX layer**
39- Unicorn handles parallax, lighting, distortions on top of standard layout
40- Deep 3D (full environments) stays in custom Three.js/R3F
41
42**Pattern 3: Rapid prototyping**
43- Designers iterate look in Unicorn
44- Devs replicate/extend in GLSL/TSL/WebGPU where needed
45
46## Three.js Core Concepts
47
48**Scene structure:** Scene → Camera → Mesh (Geometry + Material) → Renderer
49
50**Lighting types:**
51- `AmbientLight`: Uniform fill, no shadows
52- `DirectionalLight`: Parallel "sunlight", casts shadows
53- `PointLight`: Omnidirectional from point, falloff
54- `SpotLight`: Cone-shaped, focused highlights
55- `HemisphereLight`: Sky/ground gradient
56
57**Materials:**
58- PBR: baseColor, metalness, roughness, normal, AO
59- Unlit: Ignores scene lighting (UI, toon, FX)
60- Custom: Your own BRDF/stylized lighting
61
62## Shader Fundamentals
63
64**Vertex shader:** Positions vertices, deforms geometry (waves, wobble, displacement)
65
66**Fragment shader:** Computes pixel color (lighting, shading, effects)
67
68**Common patterns:**
69- Gaussian blur: Double render-pass softening
70- Fresnel: View-angle rim highlight (glow, outlines)
71- Cel/toon: Quantized light bands
72- Displacement: Texture/math moves vertices
73
74**Languages:**
75- GLSL: C-like, WebGL standard
76- TSL: Node-based, generates shaders (WebGPU)
77
78## Scroll + Interaction Stack
79
80**GSAP:**
81- Timeline: Sequenced animations, scrubbed by scroll/time
82- ScrollTrigger: Links scroll position to timeline progress
83- Easing: Acceleration curves (power, easeInOut)
84
85**Lenis:** Smooth scroll library, feeds delta to GSAP + render loop
86
87**Scroll-driven camera:** Camera position/rotation/FOV updated by scroll progress
88
89**Best practices:**
90- Dedicated render loop + smooth scroll delta (Lenis)
91- Drive shader uniforms (time, intensity, distortionAmount) from GSAP timelines
92- Combine custom shaders + scroll camera + UI text animation in cohesive hero
93
94## Quick Reference
95
96See `references/glossary.json` for term definitions and code mappings.
97
98See `references/workflows.md` for step-by-step implementation guides:
99- Scroll-driven 3D hero
100- Unicorn embed in Next.js
101- Custom shader + GSAP integration
majiayu000