   (restore!)
   )
 
+(defn draw-es-captions!
+  [{:keys [es3 es5 es6 es7 es8]}]
+  (save!)
+  (doseq [[i es] (map-indexed vector [es3 es5 es6 es7 es8])]
+    (when-not (zero? (:alpha es))
+      (save!)
+      (global-alpha! (:alpha es))
+      (let [angle (/ PI 4)
+            dx (cos angle)
+            dy (sin angle)
+            r (-> @state :js-face :r)
+            dr (get-core-dr r)
+            cr (- (get-core-radius i r) (/ dr 2))
+            y (- (* dy cr))
+            x0 (* dx cr)
+            x1 250
+            a 10
+            at (/ a 3)]
+
+        ;; highlight the layer
+        (line-width! dr)
+        (circle! 0 0 cr)
+        (stroke-style! "#1EA")
+        (stroke!)
+
+        ;; point at layer
+        (line-width! 5)
+        (line-cap! "round")
+        (stroke-line! x0 y x1 y)
+        (stroke!)
+
+        ;; draw caption
+        (let [layer (get core-layers i)]
+          (text-baseline! "middle")
+          (text-align! "left")
+          (fill-style! "#EEE")
+          (font! "100 40px Roboto")
+          (fill-text! (:name layer) (+ 10 x1) y)
+          (fill-style! "#AAA")
+          (font! "100 14px Roboto")
+          (fill-text! (:desc layer) (+ 15 x1) (+ 30 y)))
+
+        )
+      (restore!)
+      ))
+  (restore!)
+  )
+
 
 ;;--------------------------------------------------------------------------------
 ;; Drawing

  (global-alpha! alpha)
  (stroke-style! "#EEE")
  (doseq [[i layer] (reverse (map-indexed vector core-layers))]
    (let [cr (* (inc i) (/ r (count core-layers)))]
      (circle! x y cr)
      (fill-style! (:color layer))
      (fill!)))

(defn text-align! [x] (aset ctx "textAlign" x))
(defn text-baseline! [x] (aset ctx "textBaseline" x))
(defn line-width! [x] (aset ctx "lineWidth" x))
(defn line-cap! [x] (aset ctx "lineCap" x))

;;--------------------------------------------------------------------------------
;; Slide Drawings
