3D Depth Effects Studio
Transform your images into stunning 3D animated experiences. Master depth-based scanning effects, fluid simulations, and interactive parallax in minutes.
What Is 3D Depth Effects Studio?
A WebGL-powered rendering engine that analyzes depth information in images to create hardware-accelerated visual effects. Instead of CSS animations or video files, we leverage your GPU's shader processors - the same technology used in 3D games.
Under the Hood
AI Depth Generation
Upload any image - we automatically generate a depth map using AI models. No manual masking required.
Edge Detection
Custom edge detection algorithms identify object boundaries in the depth map for precise effect targeting.
GPU Shader Pipeline
Fragment shaders read depth/edge data as textures and calculate per-pixel effects in real-time on your video card.
Optimized Rendering
Intelligent viewport detection pauses animations when off-screen. Frame limiting prevents battery drain.
Why WebGL? Direct GPU access means smooth 60-240 FPS animations without blocking the main JavaScript thread. Shader programs process millions of pixels per frame - impossible with DOM manipulation or Canvas 2D.
Key Technical Features
✓ Zero-latency depth scanning - Shader logic samples depth texture values per-pixel for instant position-based effects
✓ Lightweight - No external rendering libraries - just raw WebGL for maximum control and performance
✓ No server rendering - All animation happens client-side, reducing latency and server costs
✓ Dual bloom pipeline - Separate background and dynamic bloom passes for layered luminance
✓ Dynamic interaction - Hover events update shader uniforms instantly, no DOM reflows
✓ Custom fluid simulation - Physics-based velocity/divergence calculations in WebGL compute shaders
✓ Battery efficient - Pause logic stops GPU work when canvas isn't visible
✓ 3D parallax displacement - Vertex shader offsets based on depth + mouse position for true perspective
✓ Multi-pass rendering - Ping-pong framebuffer technique for iterative blur and glow effects
✓ Automatic resource cleanup - Texture memory management prevents leaks in single-page apps
Performance Note: Effects render at native resolution using GPU textures. A 1920×1080 canvas processes 2 million pixels per frame - only possible with hardware acceleration. CPU-based approaches would struggle at 5 FPS.
Quick Start Guide
Get your first stunning 3D effect live in under 5 minutes! Follow these simple steps:
1. Install the App
Add 3D Depth Effects Studio to your Wix site
Tip: Open your Wix Editor → Click "Add Apps" → Search "3D Depth Effects Studio" → Click "Add to Site" The link to app market
2. Position on Your Page
Drag and drop the app element where you want the effect & Click on widget to open app "SETTINGS"
Tip: Works great in hero sections, backgrounds, or as interactive portfolio pieces
3. Upload Your Image
Open "SETTINGS" → click "Generate Images" → follow 3 easy steps to generate and save image maps
Tip: Use images with clear foreground/background separation for best results
4. Select Main Effect & Customize Settings
Browse 12 pro effects, read documentation, adjust colors and animation mode, play with bloom and 3D, interaction modes fine tune it untill it suits your needs best
Tip: Try "Scanning Line" for professional look, "Neon Grid" for tech vibe, or "Aurora" for creative flair. Use interactive playground for this docs page to get better understanding on what app can do for you and some tip.
5. Test & Publish
Preview on devices, then publish your masterpiece!
Tip: Always test on different breakpoints before publishing. Widget is totally responsive so don't be worry about sizing it.
📝 Free Plan Note: You can test all settings in the WIX Editor or WIX Preview, but on published sites, only default settings will apply. Upgrade to Premium to unlock custom settings on your live website!
Check the video starting from 00:35 to see the installation guide. YouTube link
Interactive Settings Guide
All settings are organized into logical categories. Each parameter directly controls shader uniforms or rendering behavior. Use the interactive demos to see real-time changes - every widget runs an isolated WebGL context with your exact settings.
Settings Categories Overview:
-
Scene Settings - Universal settings that apply regardless of effect type (General, Performance, 3D, Bloom)
-
Effect Settings - Parameters specific to the chosen effect type (scanning vs fluid vs interaction)
Scene Settings
Universal settings that apply to all effects. These control the base image, performance, depth perception, and glow layers.
1. General Settings
Scene Setting
Adjust the base image appearance without a need to make correction to image and re-uploading it to the widget.
These settings modify the scene before effects are applied, allowing you to perfect brightness, contrast, and color tint directly in the widget - no need to re-process depth/edge maps.
Overlay Color:
Standard Brightness/Contrast — image appears close to the original. Overlay exposure at neutral — no perceptible change.
Effect used: Scanning Line + Edge Map
2. Performance Settings
Scene Setting
Control rendering performance and battery usage by limiting FPS (Frames Per Second).
FPS determines how many times per second the effect redraws the canvas. Higher FPS produces smoother motion and more responsive visuals, but also increases GPU load, CPU activity, and battery consumption.
For reference, a 1920×1080 canvas contains over 2 million pixels. At 100 FPS, the system processes roughly 200 million pixel updates per second. Reducing the cap to 50 FPS instantly halves this workload - saving around 100 million pixel operations every second.
While the widget itself is highly optimized and typically uses only around 50 MB of video memory for full screen sized widget (for comparison, the base iPhone 17 model includes 8 GB of unified RAM), it’s still recommended to keep the FPS between 30 and 90 for balanced performance, smooth visuals, and lower battery usage.
Higher frame rates (120 FPS and above) may provide a noticeable improvement only on high-refresh gaming monitors, but otherwise result in unnecessary power consumption.
60 fps - Smooth, balanced performance. Recommended default for most websites.
Effect used: Scanning Aurora
3. 3D Depth Effect
Scene Setting
Mouse-responsive parallax that creates 3D perspective.
Foreground elements move more than background based on depth map data. The vertex shader offsets pixels based on depth value + mouse position for true depth perception.
Best to be used with clear difference between background and foreground having an object located in foreground.
Subtle 3D effect - professional depth hints without distraction.
Note: Move your mouse over the preview to see the 3D parallax effect in action!
Effect used: Scanning Grid
4. BLOOM - Background Bloom
Scene Setting
Ambient glow applied to the base image at all times and not depending on chosen effect. Creates atmospheric, dreamy quality. Independent of effect animation—this glow is always present if value more than 0 and overall bloom is enabled.
How Bloom Works?
The fragment shader analyzes each pixel's luminance. Pixels exceeding the threshold value are extracted into a separate framebuffer, then processed through multi-pass Gaussian blur (horizontal + vertical passes for performance). The blurred result is additively composited back onto the original image with the specified strength multiplier, creating the characteristic glow around bright areas.
Threshold explained:
Bloom uses luminance: L = 0.299*R + 0.587*G + 0.114*B
Pixels brighter than threshold get extracted → blurred → added back.
-
Low (0-30) - Almost everything glows
-
Medium (50-70) - Selective, professional
-
High (80+) - Only extreme highlights
Subtle glow - barely visible, professional polish.
Moderate threshold - selective bloom on brighter areas.
Bloom Color:
Makes bloom pulse/fade in and out rhythmically for attention-grabbing effect.
Effect used: Scanning Line + Edge map
Different Effect Types
EFFECT Setting
Scanning Effects
Depth-aware animations that sweep through your image based on distance from camera.
Fluid Effects
Physics-based fluid simulations for organic, interactive experiences. Effects respect depth/edge map. Best with hover mode.
Compare All Effects
Try different effect types to compare and find your perfect style.
Effect Color, Intensity and Effect Size settings are common for all effects.
Effect Intensity: Controls how prominently the effect appears over your image
Effect Size: Width of scanning band or area of effect influence. Larger = more diffuse sweep
Understanding Effects: Effects are the primary textures or visual layers rendered on the canvas. Each effect comes with its own customizable parameters that control its appearance and behavior. Adjusting these parameters - along with other widget settings - can completely transform the animation’s style and dynamics. The examples shown use a ‘default’ parameter set, but experimenting with different values lets you create your own unique and stunning variations.
Clean horizontal sweep with smooth progression - professional and versatile.
Effect Color:
Balanced visibility - effect is clearly visible without overwhelming the image.
Medium width - balanced between sharp focus and smooth gradient.
Best for:
Professional portfolios, corporate presentations, product reveals
1. BLOOM - Scanning Bloom
EFFECT Setting
Professional Glow. Scanning bloom is range of settings dedicated to the scanning effects. Bloom extracts bright pixels, blurs them heavily, then composites back over the scanning effect radius. Creates cinematic, luminous quality. Only visible during scanning effect animation.
Scanning Effects Only: These controls have no effect when using Fluid-based effects. If you switch to Fluid Spot, Glow, Splat, Rings, Fog, or Fluid Reveal, this bloom layer won't render.
Scanning Bloom Color:
Moderate glow on scanning element - enhances without overpowering.
Standard spread - glow visible but contained to scanning element.
2. Edge map & Reverse
EFFECT Setting
Edge Map Enhancement - uses app-detected edges (Canny algorithm) to sharpen effect transitions. Creates crisper boundaries where objects meet. Highly recommended for scanning effects to prevent blur across depth discontinuities.
Not Applicable To - Fluid: Spot, Fluid: Glow, Fluid: Splat, Interactive Rings
Why? These 4 effects are fluid-dynamics based with continuous, flowing motion. Edge maps create artificial "snapping" to edges that breaks the organic, smooth fluid behavior. They're designed to blend naturally across depth without hard boundaries.
Reverse Direction - Reverses the progression direction of the effect. Behavior varies significantly by effect type - see details below.
Reverse Behavior by Effect Categoty:
Scanning Effects (Line, Dots, Cross, Circles, Neon, Aurora):
-
Normal: Near → Far (foreground first, then background)
-
Reversed: Far → Near (background first, then foreground)
Not Applicable To - Fluid Effects.
When enabled - Sharper, cleaner effect transitions at object boundaries thou the scanning effect.
When diisabled - Normal progression direction (far to near for scanning effects).
2. Scanning Effect Related Settings
EFFECT Setting
These parameters only apply to the 6 scanning effects (Scanning Line, Dots, Cross, Circles, Neon Grid, Aurora Ribbons). They control depth-based scanning behavior and have no effect when using fluid effects.
Start Distance & End Distance
Depth-based distance is not the same as visible (linear) distance. In a depth map, objects farther away appear smaller and are positioned deeper in space, so their relative distance increases non-linearly. In other words, 40% of visible image distance does not equal 40% of depth distance - it’s often closer to 50–60% for linear depth images like in example below, in reality it all depends on the actual image’s perspective and depth distribution.
Creative uses:
-
start 0 → end 100: Standard full scan (background to foreground)
-
start ~30 → end ~70: Scan only midground objects (skip extreme depths)
-
start 0 → end ~50: Scan background only, leave foreground static
-
start ~50 → end 100: Scan foreground only, ignore background
0 (far background) - Effect starts from the furthest point in the scene.
100 (near foreground) - Effect completes at the closest point in the scene.
Particle Amount
Number of particles rendered. Not applicable to Scanning Line . Higher = denser, more dramatic. Lower = sparse, minimalist. Performance impact is minimal (instanced rendering). For Neon Grid - Particle count works different - it controls the grid perspective.
10 particles - balanced density, professional appearance.
Neon Grid Settings — For Neon Grid Effect Only
Control the grid pattern for Neon Grid effect. Density affects line spacing, orientation changes scan direction.
Medium density - clear grid structure without overcrowding.
4. Fluid Effect Dedicated Settings
EFFECT Setting
Parameters for the fluid-dynamics effects. These control positioning, fluid behavior, viscosity, and flow characteristics.
⚠️ Applicability varies - not all fluid effects use all these settings (see notes below).
Fluid Properties
Control the physical simulation behavior. Intensity = how strongly the effect appears. Viscosity = resistance/thickness (low = watery, high = honey). Flow Speed = animation velocity.
Physics simulation: These parameters feed into Navier-Stokes fluid equations. Intensity controls how strongly the fluid distortion or effect appears on screen, viscosity controls diffusion rate, flow speed multiplies time delta. The shader computes curl, divergence, and pressure to create realistic fluid motion.
We recommend to use Fluid effects with Hover trigger. However in this case we will use "Autoplay" trigger in order to show positioning settings.
Applicability Notes:
• Interactive Rings: No Intensity/Viscosity (uses ring-specific physics)
• Moving Fog: Missing Horizontal/Vertical Position (auto-generated flow)
• All other fluid effects: Use all 5 parameters below
0 (far background) - Effect starts from the furthest point in the scene.
100 (near foreground) - Effect completes at the closest point in the scene.
Moderate intensity - fluid effect clearly visible without overpowering the image.
Medium viscosity - balanced fluid velocity and movement.
Moderate flow - comfortable viewing speed without rushing.
5. Trigger Mode
EFFECT Setting
This setting controls how and when the depth effect activates on your canvas.
Auto Mode - The effect animates continuously in an independent loop without requiring any user interaction.
For scanning effects, auto mode creates a repeating sweep animation that progresses from the starting depth position to the ending depth position. Since scanning effects have clearly defined animation start and end points in depth space, this mode offers advanced customization options including:
-
Duration control (in seconds) - Set how fast or slow the complete scanning cycle takes
-
Easing curves - Choose animation timing functions (linear, ease-in, ease-out) for smooth or dramatic progression
For fluid effects, auto mode works differently. Rather than following a cycled animation loop, fluid effects auto-animate continuously at their configured position with organic, physics-based motion. The fluid remains active and flowing without cycling through depth layers.
Hover Mode - The effect activates only when the user's mouse cursor is positioned over the canvas, creating an interactive, user-controlled experience.
The system captures the cursor's X/Y coordinates and interpolates them against the depth map to determine the corresponding depth value at that screen position. This depth value then controls where the effect appears in 3D space.
For scanning effects, hover mode offers multiple tracking options:
-
Depth-based mode - The scanning effect follows the cursor's position in depth space. As you move the mouse over areas with different depth values (near/far objects), the scanning animation dynamically positions itself at that corresponding depth layer
-
Top > Bottom - Alternative tracking patterns like top-to-bottom, where cursor position along an axis controls the scanning progression
-
Hover smoothing - Adjustable interpolation smoothing (0-100) that controls how responsively the effect follows cursor movement. Lower values = instant, jittery response; higher values = smooth, fluid tracking with slight lag
For fluid effects, hover mode always uses depth-based tracking. The cursor position is continuously sampled against the depth map, and the fluid simulation spawns and follows at the corresponding depth layer. This creates an intuitive interaction where the fluid appears to "paint" across depth layers as you move the cursor over different parts of the image.
Moderate smoothing - smooth, comfortable tracking.
10 seconds per cycle - comfortable viewing speed.
Pro Tips for Stunning Results
Depth Map Quality Matters
A WebGL-powered rendering engine that analyzes depth information in images to create hardware-accelerated visual effects. Instead of CSS animations or video files, we leverage your GPU's shader processors - the same technology used in 3D games.
Why depth maps fail:
-
AI confusion - Reflections, transparent objects, or complex overlapping scenes confuse the depth model
-
Low contrast - Flat lighting or monochromatic images provide few depth cues
-
Texture noise - High-ISO photos introduce grain that the AI interprets as depth variation
Solutions: Use well-lit images with clear subject separation. Portrait mode photos work great since they already have depth data. Architectural shots with strong perspective lines produce excellent results.
Performance Optimization Strategies
FPS vs. Quality Trade-offs:
-
High FPS (120-240): Only beneficial on high-refresh monitors. Most users won't notice above 60 FPS. Uses more GPU power.
-
60 FPS (recommended): Smooth animations, universal compatibility, balanced battery usage.
-
30 FPS: Still smooth for slower effects (10s scan duration). Significant battery savings on mobile.
-
Bloom passes: Each bloom level adds ~2ms render time. Lower bloom radius reduces GPU load linearly.
-
Image Resolution: If your original image resolution is high and you are going to have several widgets on the page consider to lower resolution by % or use parent element dimensions as new image resolution setting multiplied by scale pixel ratio to look good on any devices.
Color Science for Bloom
Understanding Bloom Threshold:
Bloom uses luminance calculation: L = 0.299*R + 0.587*G + 0.114*B
Pixels brighter than threshold get extracted, blurred, then added back.
Best practices:
-
0-30: Almost everything glows - good for dreamy/ethereal looks
-
5-70: Selective bloom on bright areas - professional, cinematic
-
80+: Only extreme highlights glow - subtle polish, prevents over-blooming
Match bloom colors to your palette: cyan bloom on warm images creates color contrast; complementary colors pop more.
Color Science for Bloom
High-detail images > Edge Map ON + Scanning Line
Edge enhancement prevents effect from bleeding across boundaries
Smooth gradients > Aurora or Fluid Glow
Organic flow works with smooth depth transitions, less artifact-prone
Tech/Gaming sites > Neon Grid + high bloom
Grid perspective + glow = cyberpunk aesthetic, matches tech branding
E-commerce products > Scanning Cross + moderate speed
Crosshair draws eye to product center, professional appearance
Artistic portfolios > Fluid effects + custom colors
Unpredictable motion creates unique moments, stands out from scanning
Advanced: Custom Depth Maps
For power users: If AI-generated depth isn't perfect, create your own:
-
Export color image to Photoshop/GIMP
-
Use layer masks or painting tools to create grayscale depth map (white = near, black = far)
-
Apply Gaussian blur (15-30px radius) to smooth transitions
-
Export as PNG, upload as "Depth Map" in app folder. Name should be in format deep~~~{width resolution}x{height resolution}.png
Manual depth maps give perfect control but require artistic skill. Best for critical projects where AI isn't accurate enough.
Troubleshooting Common Issues
Problem: Effect is Too Subtle or Invisible
Solutions:
-
Increase Intensity to 150 or higher
-
Crank up Bloom Strength to 25+
-
Use brighter Effect Colors (white, cyan, bright colors)
-
Lower Bloom Threshold to 30-50
-
Increase Effect Size for wider coverage
Problem: Performance is Laggy or Choppy
Solutions (from higher impact to lower):
-
Decrease Image Resolution setting
-
Lower FPS Limit to 30 fps
-
Switch off Edge map
-
Reduce to 0 3D Depth Strength
-
Reduce Bloom Radius to 5 or less
-
Decrease Bloom Strength (less processing)
-
Switch to simpler effect (e.g. Line instead of Neon Grid)
-
Test on target devices before publishing
Problem: Depth Effect Looks Wrong or Inverted
Solutions:
-
Your depth map might be inverted - check that white = near, black = far
-
Try enabling Reverse option to flip scanning direction
-
Regenerate depth map with different AI tool
-
Manually adjust depth map in Photoshop (invert if needed)
Problem: Custom Settings Don't Work on Published Site
Reason: Free plan limitation. Only image source and some performance settings available in Free plan in published website.
Solution: Upgrade to Premium plan for custom settings to persist on live websites. Free plan only supports default configurations on published sites (full customization works in editor and in preview mode - so you can see the app in action and try it before getting your plan).
Problem: Effect Doesn't Respond to Hover
Solutions:
-
Verify Trigger Mode is set to "Hover" not "Auto"
-
Check that mouse cursor is over the canvas area
-
Try switching between Top-to-Bottom and Depth-Based modes
-
Reduce Hover Smoothing for more responsive feedback
Problem: Colors Look Washed Out or Incorrect
Solutions:
-
Adjust Brightness (try 90-100 range)
-
Increase Contrast to 110-120
-
Lower Overlay Exposure to reduce color tint
-
Decrease Bloom Threshold (too high makes dims areas)
-
Check source image quality and color space
Problem: Purchased Support-Developer Plan & want credits to be shown
Solutions:
Contact us with next details:
-
Your website URL
-
Purchase date
-
Preferred nickname
-
Say if you want your website to be shown
Once we get these details we guarantee to list your specified name (& optional website link) in special credits place in app demo page as long as you have support developers plan.
Supporting development will motivate us develop new interesting effects to this app, polish current. You will always got an exclusive early access to all new features.
Need More Help?
📧 Email: vanyadoing@gmail.com
🌐 Contact: vanyadoing-dev.com/contact
🎬 Demo: See effects in action
Ready to Create Stunning Depth Effects?
Start with the free plan to test all features, then upgrade when you're ready to publish custom settings.
