BlueHopper Lights Visualizer

Upload Photo: Click the upload dropzone in the sidebar or the big placeholder on the canvas to choose a photo of your house.
Drag & Drop: You can drag an image file directly onto the upload dropzone.
Re-upload: Uploading a new image clears all existing lights and resets settings to defaults.
Canvas Resize: The canvas automatically fits the image to the available panel. Lights scale proportionally when the window is resized.
Logo Branding: Once you select an image, the brand logo is automatically overlaid at the bottom-left corner of the canvas (object-fit: contain, 100px × 70px) and will be included in all exports.

Use the Lighting Mode dropdown to switch between Roofline Lighting, PAR36 Light, and Wall Washer.
Switching modes shows only the controls relevant to that mode in the sidebar.
Lights from all modes coexist — you can combine roofline LEDs, PAR36 spotlights, and wall washers on the same image.

Place Points: Left-click (or tap) on the image to place LED anchor points. A green line connects them and LEDs are spaced evenly along it.
Multiple Segments: Click Add New Line to start a fresh, independent roofline segment for a different part of the roof.
Undo Last Point: Right-click anywhere on the canvas — or tap Undo Last Point on mobile — to remove the most recently placed point.
Clear All: Click Clear Roofline Points to remove all segments and reset colors.
Light Spacing: The Light Spacing number input controls distance between LEDs (in mm-equivalent units).
Color Combo Size: Sets how many consecutive LEDs share the same color before cycling to the next color in the palette.
Animation: Once points are placed, roofline lights animate automatically. See Animation Effects below to control the pattern.

Place Fixture: Left-click on the image to place an upward-projecting PAR36 spotlight at that position.
Select a Light: Click an existing spotlight on the canvas, or click its row in the PAR36 Controls sidebar list, to select it (highlighted in blue).
Edit Selected Light: With a spotlight selected, use Beam Length, Light Size, and Brightness to adjust only that fixture. Each light stores its own settings.
Hover Preview: Hover over a sidebar list entry to see a dashed highlight ring around that spotlight on the canvas.
Delete Single: Right-click near a spotlight on the canvas, or click the trash icon in its sidebar row, to remove it.
Clear All: Click Clear PAR36 Lights to remove all spotlights.
Colors: Colors from the palette cycle across spotlights in order (Light #1 → color 1, Light #2 → color 2, etc.).

Place Bar: Left-click on the image to mount a Wall Washer LED bar. It displays 10 glowing LED diodes and projects a wide uniform light wash.
Beam Direction: Use the Downward / Upward toggle in the sidebar before placing to set the beam direction. You can also flip an already-placed wall washer by selecting it, then clicking the toggle.
Select a Light: Click a wall washer on the canvas or its sidebar row to select it. The direction toggle will sync to that light's saved direction.
Edit Selected Light: Use Beam Length, Light Size, and Brightness to customize each wall washer individually.
Hover Highlight: Hover over a sidebar row to show a dashed bounding box around that fixture on the canvas.
Delete Single: Right-click on a wall washer on the canvas, or use the trash icon in the sidebar, to remove it.
Clear All: Click Clear Wall Washers to remove all wall washer fixtures.

Color Swatches: The Light Colors card shows your active palette. Click any swatch to open the color picker and change it instantly.
Add Color: Click Add New Color to add a new color (maximum 6 colors).
Remove Color: Click the ✕ button on any swatch to delete it from the palette.
Cycling: Colors cycle across lights in order. In Roofline mode the Color Combo Size determines how many consecutive LEDs share each color.

Brightness: Global light intensity slider (0–100%). When a PAR36 or Wall Washer is selected it adjusts only that fixture; otherwise it sets the default for new lights.
Night Overlay: Adds a dark semi-transparent layer over your image (0–100% opacity) to simulate dusk/night conditions so lighting effects stand out more against daytime photos. Adjust the slider to find the right darkness.
Beam Length (PAR36 & Wall Washer): How far the beam projects from the fixture. Per-light when a light is selected.
Light Size: Scales the fixture body and beam spread. Larger = wider, more prominent fixture.
Light Spacing (Roofline only): Distance between individual LED points along the roofline path.
Color Combo Size (Roofline only): Consecutive LEDs sharing one color before the palette cycles.

Effect Type: Choose the animation pattern — Left → Right (lights turn on sweeping left to right), Right → Left (reverse sweep), or Blink (all lights flash on and off together).
Animation Speed: Drag the speed slider from 0.1× (very slow) to 1× (fast) to control how quickly the pattern plays.
Always On: Roofline animation starts automatically as soon as two or more points are placed, and loops continuously.

Activate: On the canvas, click and hold (or long-press on touch) for ~0.25 seconds without releasing to pop up a magnifier lens at your cursor.
Drag to Pan: While holding, move the cursor to pan the zoomed view and line up the red crosshair precisely.
Place Point: Release the hold to place a point exactly at the crosshair center — perfect for tricky roofline corners.
Quick Tap: A short click/tap (no hold) places a point immediately without the magnifier.

Drag to Reposition: Left-click and drag any active roofline point, PAR36 spotlight, or Wall Washer directly on the canvas to move it to a new location.
Automatic Update: Roofline lines and light paths recalculate automatically while dragging.
Select to Customize: Dragging a PAR36 spotlight or Wall Washer also automatically selects it so you can adjust its specific settings.

Download GIF: Generates a high-quality loopable `.gif` file of your lights animation. (Recommended for sharing on messaging apps).
Download Video: Generates a high-quality video `.webm` (or `.mp4` depending on browser support) of the real-time canvas animation.
Select Duration: Click either download button to bring up a duration picker, allowing you to choose between 10 seconds, 20 seconds, 30 seconds, or 1 minute.
Real-time Progress: An overlay will show the export progress. Please do not close the tab or change the settings while the export is encoding.

Mix all modes: Combine roofline LEDs + PAR36 spotlights + wall washers on the same image for a full outdoor lighting preview.
Right-click anywhere: On the canvas, right-click near any light to delete it quickly.
Per-light settings: PAR36 and Wall Washer lights each store their own brightness, beam length, and size — select a light to edit just that one.
Mobile friendly: Use the Undo Last Point button (visible on mobile/tablet) instead of right-clicking.
Responsive canvas: Resize the browser window — all light positions scale automatically with the canvas.