diff --git a/app-proto/inversive-display/Cargo.toml b/app-proto/inversive-display/Cargo.toml
index bcf6b76..3d7eb3f 100644
--- a/app-proto/inversive-display/Cargo.toml
+++ b/app-proto/inversive-display/Cargo.toml
@@ -9,7 +9,6 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 js-sys = "0.3.70"
-nalgebra = "0.33.0"
 sycamore = "0.9.0-beta.2"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css
index 7cdc831..f79e62c 100644
--- a/app-proto/inversive-display/main.css
+++ b/app-proto/inversive-display/main.css
@@ -18,16 +18,6 @@ canvas {
   margin-top: 5px;
 }
 
-.control {
-  display: flex;
-  flex-direction: row;
-  width: 600px;
-}
-
-label {
-  width: 150px;
-}
-
 input {
-  flex-grow: 1;
+  margin-top: 5px;
 }
\ No newline at end of file
diff --git a/app-proto/inversive-display/src/engine.rs b/app-proto/inversive-display/src/engine.rs
deleted file mode 100644
index 7fbcd03..0000000
--- a/app-proto/inversive-display/src/engine.rs
+++ /dev/null
@@ -1,12 +0,0 @@
-use nalgebra::DVector;
-
-pub fn sphere(center_x: f64, center_y: f64, center_z: f64, radius: f64) -> DVector<f64> {
-    let center_norm_sq = center_x * center_x + center_y * center_y + center_z * center_z;
-    DVector::from_column_slice(&[
-        center_x / radius,
-        center_y / radius,
-        center_z / radius,
-        0.5 / radius,
-        0.5 * (center_norm_sq / radius - radius)
-    ])
-}
\ No newline at end of file
diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index 51bc0ff..a4cbe8d 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -4,32 +4,6 @@ precision highp float;
 
 out vec4 outColor;
 
-// --- inversive geometry ---
-
-struct vecInv {
-    vec3 sp;
-    vec2 lt;
-};
-
-vecInv sphere(vec3 center, float radius) {
-    return vecInv(
-        center / radius,
-        vec2(
-            0.5 / radius,
-            0.5 * (dot(center, center) / radius - radius)
-        )
-    );
-}
-
-// --- uniforms ---
-
-// construction. the SPHERE_MAX array size seems to affect frame rate a lot,
-// even though we should only be using the first few elements of each array
-const int SPHERE_MAX = 12;
-uniform int sphere_cnt;
-uniform vecInv sphere_list[SPHERE_MAX];
-uniform vec3 color_list[SPHERE_MAX];
-
 // view
 uniform vec2 resolution;
 uniform float shortdim;
@@ -40,7 +14,6 @@ uniform vec2 radius;
 uniform float opacity;
 uniform float highlight;
 uniform int layer_threshold;
-uniform bool test_mode;
 
 // light and camera
 const float focal_slope = 0.3;
@@ -73,6 +46,23 @@ vec3 sRGB(vec3 color) {
     return vec3(sRGB(color.r), sRGB(color.g), sRGB(color.b));
 }
 
+// --- inversive geometry ---
+
+struct vecInv {
+    vec3 sp;
+    vec2 lt;
+};
+
+vecInv sphere(vec3 center, float radius) {
+    return vecInv(
+        center / radius,
+        vec2(
+            0.5 / radius,
+            0.5 * (dot(center, center) / radius - radius)
+        )
+    );
+}
+
 // --- shading ---
 
 struct taggedFrag {
@@ -134,40 +124,40 @@ void main() {
     vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim;
     vec3 dir = vec3(focal_slope * scr, -1.);
     
-    // cast rays through the spheres
-    vec2 depth_pairs [SPHERE_MAX];
-    taggedFrag frags [2*SPHERE_MAX];
-    int frag_cnt = 0;
-    for (int i = 0; i < sphere_cnt; ++i) {
-        vec2 hit_depths = sphere_cast(sphere_list[i], dir);
-        if (!isnan(hit_depths[0])) {
-            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
-            ++frag_cnt;
-        }
-        if (!isnan(hit_depths[1])) {
-            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
-            ++frag_cnt;
-        }
-    }
+    // initialize two spheres
+    vecInv v [2];
+    v[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
+    v[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
+    vec3 color0 = vec3(1., 0.214, 0.);
+    vec3 color1 = vec3(0., 0.214, 1.);
     
-    // sort the fragments by depth, using an insertion sort
-    for (int take = 1; take < frag_cnt; ++take) {
-        taggedFrag pulled = frags[take];
-        for (int put = take; put >= 0; --put) {
-            if (put < 1 || frags[put-1].pt.z >= pulled.pt.z) {
-                frags[put] = pulled;
-                break;
-            } else {
-                frags[put] = frags[put-1];
-            }
-        }
-    }
+    // cast rays through the spheres
+    vec2 u0 = sphere_cast(v[0], dir);
+    vec2 u1 = sphere_cast(v[1], dir);
+    
+    // shade and depth-sort the impact points
+    taggedFrag front_hits[2] = sort(
+        sphere_shading(v[0], u0[0] * dir, color0, 0),
+        sphere_shading(v[1], u1[0] * dir, color1, 1)
+    );
+    taggedFrag back_hits[2] = sort(
+        sphere_shading(v[0], u0[1] * dir, color0, 0),
+        sphere_shading(v[1], u1[1] * dir, color1, 1)
+    );
+    taggedFrag middle_frags[2] = sort(front_hits[1], back_hits[0]);
+    
+    // finish depth sorting
+    taggedFrag frags_by_depth[4];
+    frags_by_depth[0] = front_hits[0];
+    frags_by_depth[1] = middle_frags[0];
+    frags_by_depth[2] = middle_frags[1];
+    frags_by_depth[3] = back_hits[1];
     
     // highlight intersections and cusps
-    for (int i = frag_cnt-1; i >= 1; --i) {
+    for (int i = 3; i >= 1; --i) {
         // intersections
-        taggedFrag frag0 = frags[i];
-        taggedFrag frag1 = frags[i-1];
+        taggedFrag frag0 = frags_by_depth[i];
+        taggedFrag frag1 = frags_by_depth[i-1];
         float ixn_sin = length(cross(frag0.normal, frag1.normal));
         vec3 disp = frag0.pt - frag1.pt;
         float ixn_dist = max(
@@ -175,21 +165,21 @@ void main() {
             abs(dot(frag0.normal, disp))
         ) / ixn_sin;
         float ixn_highlight = 0.5 * highlight * (1. - smoothstep(2./3.*ixn_threshold, 1.5*ixn_threshold, ixn_dist));
-        frags[i].color = mix(frags[i].color, vec4(1.), ixn_highlight);
-        frags[i-1].color = mix(frags[i-1].color, vec4(1.), ixn_highlight);
+        frags_by_depth[i].color = mix(frags_by_depth[i].color, vec4(1.), ixn_highlight);
+        frags_by_depth[i-1].color = mix(frags_by_depth[i-1].color, vec4(1.), ixn_highlight);
         
         // cusps
         float cusp_cos = abs(dot(dir, frag0.normal));
-        float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list[frag0.id].lt.s);
+        float cusp_threshold = 2.*sqrt(ixn_threshold * v[frag0.id].lt.s);
         float cusp_highlight = highlight * (1. - smoothstep(2./3.*cusp_threshold, 1.5*cusp_threshold, cusp_cos));
-        frags[i].color = mix(frags[i].color, vec4(1.), cusp_highlight);
+        frags_by_depth[i].color = mix(frags_by_depth[i].color, vec4(1.), cusp_highlight);
     }
     
     // composite the sphere fragments
     vec3 color = vec3(0.);
-    for (int i = frag_cnt-1; i >= layer_threshold; --i) {
-        if (frags[i].pt.z < 0.) {
-            vec4 frag_color = frags[i].color;
+    for (int i = 3; i >= layer_threshold; --i) {
+        if (frags_by_depth[i].pt.z < 0.) {
+            vec4 frag_color = frags_by_depth[i].color;
             color = mix(color, frag_color.rgb, frag_color.a);
         }
     }
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index ebbf713..186facf 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -8,12 +8,8 @@
 //
 
 extern crate js_sys;
-use core::array;
-use nalgebra::DVector;
-use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}};
-use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation};
-
-mod engine;
+use sycamore::{prelude::*, rt::{JsCast, JsValue}};
+use web_sys::{console, WebGl2RenderingContext, WebGlShader};
 
 fn compile_shader(
     context: &WebGl2RenderingContext,
@@ -26,21 +22,6 @@ fn compile_shader(
     shader
 }
 
-fn get_uniform_array_locations<const N: usize>(
-    context: &WebGl2RenderingContext,
-    program: &WebGlProgram,
-    var_name: &str,
-    member_name_opt: Option<&str>
-) -> [Option<WebGlUniformLocation>; N] {
-    array::from_fn(|n| {
-        let name = match member_name_opt {
-            Some(member_name) => format!("{var_name}[{n}].{member_name}"),
-            None => format!("{var_name}[{n}]")
-        };
-        context.get_uniform_location(&program, name.as_str())
-    })
-}
-
 // load the given data into the vertex input of the given name
 fn bind_vertex_attrib(
     context: &WebGl2RenderingContext,
@@ -89,7 +70,6 @@ fn main() {
     console_error_panic_hook::set_once();
     
     sycamore::render(|| {
-        // controls
         let ctrl_x = create_signal(0.0);
         let ctrl_y = create_signal(0.0);
         let radius_x = create_signal(1.0);
@@ -97,21 +77,9 @@ fn main() {
         let opacity = create_signal(0.5);
         let highlight = create_signal(0.2);
         let layer_threshold = create_signal(0.0);
-        let debug_mode = create_signal(false);
-        
-        // display
         let display = create_node_ref();
         
         on_mount(move || {
-            // list construction elements
-            const SPHERE_MAX: usize = 12;
-            let mut sphere_vec = Vec::<DVector<f64>>::new();
-            let color_vec = vec![
-                [1.00_f32, 0.25_f32, 0.00_f32],
-                [0.00_f32, 0.25_f32, 1.00_f32],
-                [0.25_f32, 0.00_f32, 1.00_f32]
-            ];
-            
             // get the display canvas
             let canvas = display
                 .get::<DomNode>()
@@ -150,43 +118,15 @@ fn main() {
             console::log_1(&JsValue::from(link_msg));
             ctx.use_program(Some(&program));
             
-            /* DEBUG */
-            // print the maximum number of vectors that can be passed as
-            // uniforms to a fragment shader. the OpenGL ES 3.0 standard
-            // requires this maximum to be at least 224, as discussed in the
-            // documentation of the GL_MAX_FRAGMENT_UNIFORM_VECTORS parameter
-            // here:
-            //
-            //   https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml
-            //
-            // there are also other size limits. for example, on Aaron's
-            // machine, the the length of a float or genType array seems to be
-            // capped at 1024 elements
-            console::log_2(
-                &ctx.get_parameter(WebGl2RenderingContext::MAX_FRAGMENT_UNIFORM_VECTORS).unwrap(),
-                &JsValue::from("uniform vectors available")
-            );
-            
             // find indices of vertex attributes and uniforms
             let position_index = ctx.get_attrib_location(&program, "position") as u32;
-            let sphere_cnt_loc = ctx.get_uniform_location(&program, "sphere_cnt");
-            let sphere_sp_locs = get_uniform_array_locations::<SPHERE_MAX>(
-                &ctx, &program, "sphere_list", Some("sp")
-            );
-            let sphere_lt_locs = get_uniform_array_locations::<SPHERE_MAX>(
-                &ctx, &program, "sphere_list", Some("lt")
-            );
-            let color_locs = get_uniform_array_locations::<SPHERE_MAX>(
-                &ctx, &program, "color_list", None
-            );
             let resolution_loc = ctx.get_uniform_location(&program, "resolution");
             let shortdim_loc = ctx.get_uniform_location(&program, "shortdim");
-            let ctrl_loc = ctx.get_uniform_location(&program, "ctrl"); /* DEBUG */
-            let radius_loc = ctx.get_uniform_location(&program, "radius"); /* DEBUG */
+            let ctrl_loc = ctx.get_uniform_location(&program, "ctrl");
+            let radius_loc = ctx.get_uniform_location(&program, "radius");
             let opacity_loc = ctx.get_uniform_location(&program, "opacity");
             let highlight_loc = ctx.get_uniform_location(&program, "highlight");
             let layer_threshold_loc = ctx.get_uniform_location(&program, "layer_threshold");
-            let debug_mode_loc = ctx.get_uniform_location(&program, "debug_mode");
             
             // create a vertex array and bind it to the graphics context
             let vertex_array = ctx.create_vertex_array().unwrap();
@@ -207,143 +147,74 @@ fn main() {
             bind_vertex_attrib(&ctx, position_index, 3, &positions);
             
             // set up a repainting routine
-            let (_, start_updating_display, _) = create_raf(move || {
-                // update the construction
-                sphere_vec.clear();
-                sphere_vec.push(engine::sphere(0.5, 0.5, -5.0 + ctrl_x.get(), radius_x.get()));
-                sphere_vec.push(engine::sphere(-0.5, -0.5, -5.0 + ctrl_y.get(), radius_y.get()));
-                sphere_vec.push(engine::sphere(-0.5, 0.5, -5.0, 0.75));
-                
+            create_effect(move || {
                 // set the resolution
                 let width = canvas.width() as f32;
                 let height = canvas.height() as f32;
                 ctx.uniform2f(resolution_loc.as_ref(), width, height);
                 ctx.uniform1f(shortdim_loc.as_ref(), width.min(height));
                 
-                // pass the construction
-                ctx.uniform1i(sphere_cnt_loc.as_ref(), sphere_vec.len() as i32);
-                for n in 0..sphere_vec.len() {
-                    let v = &sphere_vec[n];
-                    ctx.uniform3f(
-                        sphere_sp_locs[n].as_ref(),
-                        v[0] as f32, v[1] as f32, v[2] as f32
-                    );
-                    ctx.uniform2f(
-                        sphere_lt_locs[n].as_ref(),
-                        v[3] as f32, v[4] as f32
-                    );
-                    ctx.uniform3fv_with_f32_array(
-                        color_locs[n].as_ref(),
-                        &color_vec[n]
-                    );
-                }
-                
                 // pass the control parameters
-                ctx.uniform2f(ctrl_loc.as_ref(), ctrl_x.get() as f32, ctrl_y.get() as f32); /* DEBUG */
-                ctx.uniform2f(radius_loc.as_ref(), radius_x.get() as f32, radius_y.get() as f32); /* DEBUG */
+                ctx.uniform2f(ctrl_loc.as_ref(), ctrl_x.get() as f32, ctrl_y.get() as f32);
+                ctx.uniform2f(radius_loc.as_ref(), radius_x.get() as f32, radius_y.get() as f32);
                 ctx.uniform1f(opacity_loc.as_ref(), opacity.get() as f32);
                 ctx.uniform1f(highlight_loc.as_ref(), highlight.get() as f32);
                 ctx.uniform1i(layer_threshold_loc.as_ref(), layer_threshold.get() as i32);
-                ctx.uniform1i(debug_mode_loc.as_ref(), debug_mode.get() as i32);
                 
                 // draw the scene
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
             });
-            
-            /*
-            this wastes CPU time by running an animation loop, which updates the
-            display even when nothing has changed. there should be a way to make
-            Sycamore do single-frame updates in response to changes, but i
-            haven't found it yet
-            */
-            start_updating_display();
         });
         
         view! {
             div(id="app") {
                 canvas(ref=display, width="600", height="600")
-                div(class="control") {
-                    label(for="ctrl-x") { "Sphere 0 depth" }
-                    input(
-                        type="range",
-                        id="ctrl-x",
-                        min=-1.0,
-                        max=1.0,
-                        step=0.001,
-                        bind:valueAsNumber=ctrl_x
-                    )
-                }
-                div(class="control") {
-                    label(for="ctrl-y") { "Sphere 1 depth" }
-                    input(
-                        type="range",
-                        id="ctrl-y",
-                        min=-1.0,
-                        max=1.0,
-                        step=0.001,
-                        bind:valueAsNumber=ctrl_y
-                    )
-                }
-                div(class="control") {
-                    label(for="radius-x") { "Sphere 0 radius" }
-                    input(
-                        type="range",
-                        id="radius-x",
-                        min=0.5,
-                        max=1.5,
-                        step=0.001,
-                        bind:valueAsNumber=radius_x
-                    )
-                }
-                div(class="control") {
-                    label(for="radius-y") { "Sphere 1 radius" }
-                    input(
-                        type="range",
-                        id="radius-y",
-                        min=0.5,
-                        max=1.5,
-                        step=0.001,
-                        bind:valueAsNumber=radius_y
-                    )
-                }
-                div(class="control") {
-                    label(for="opacity") { "Opacity" }
-                    input(
-                        type="range",
-                        id="opacity",
-                        max=1.0,
-                        step=0.001,
-                        bind:valueAsNumber=opacity
-                    )
-                }
-                div(class="control") {
-                    label(for="highlight") { "Highlight" }
-                    input(
-                        type="range",
-                        id="highlight",
-                        max=1.0,
-                        step=0.001,
-                        bind:valueAsNumber=highlight
-                    )
-                }
-                div(class="control") {
-                    label(for="layer-threshold") { "Layer threshold" }
-                    input(
-                        type="range",
-                        id="layer-threshold",
-                        max=5.0,
-                        step=1.0,
-                        bind:valueAsNumber=layer_threshold
-                    )
-                }
-                div(class="control") {
-                    label(for="debug-mode") { "Debug mode" }
-                    input(
-                        type="checkbox",
-                        id="debug-mode",
-                        bind:checked=debug_mode
-                    )
-                }
+                input(
+                    type="range",
+                    min=-1.0,
+                    max=1.0,
+                    step=0.001,
+                    bind:valueAsNumber=ctrl_x
+                )
+                input(
+                    type="range",
+                    min=-1.0,
+                    max=1.0,
+                    step=0.001,
+                    bind:valueAsNumber=ctrl_y
+                )
+                input(
+                    type="range",
+                    min=0.5,
+                    max=1.5,
+                    step=0.001,
+                    bind:valueAsNumber=radius_x
+                )
+                input(
+                    type="range",
+                    min=0.5,
+                    max=1.5,
+                    step=0.001,
+                    bind:valueAsNumber=radius_y
+                )
+                input(
+                    type="range",
+                    max=1.0,
+                    step=0.001,
+                    bind:valueAsNumber=opacity
+                )
+                input(
+                    type="range",
+                    max=1.0,
+                    step=0.001,
+                    bind:valueAsNumber=highlight
+                )
+                input(
+                    type="range",
+                    max=3.0,
+                    step=1.0,
+                    bind:valueAsNumber=layer_threshold
+                )
             }
         }
     });