             at (/ a 3)]
 
         ;; highlight the layer
-        (line-width! dr)
-        (circle! 0 0 cr)
-        (stroke-style! "#1EA")
-        (stroke!)
+        (draw-highlight-layer! i)
 
         ;; point at layer
         (line-width! 5)

    [nil ;; no action for first slide
     #(go
        (<! (multi-animate!
              {:a 900 :b 0 :duration 1} [:js-face :x]
              {:a 1 :b 0 :duration 0.4} [:title :alpha])))
     #(go
        (<! (multi-animate!
              {:a 0 :b 400 :duration 2} [:cam :x]
              {:a 0 :b -600 :duration 2} [:js-face :y]
              {:a 0 :b 600 :duration 2} [:js-face :x]
              {:a 0 :b (* 2 PI) :duration 2} [:js-face :angle]
              {:a 1 :b 0 :duration 2} [:js-face :alpha]
              {:a 0 :b 1 :duration 1} [:js-core :alpha]
              {:a 1 :b 2 :duration 2} [:cam :zoom])))
     (let [t 0.01
           low 0]
       [
        #(go
           (<! (animate!
                 {:a 0 :b 1 :duration t} [:es-captions :es3 :alpha])))
        #(go
           (<! (multi-animate!
                 {:a 1 :b low :duration t} [:es-captions :es3 :alpha]
                 {:a 0 :b 1 :duration t} [:es-captions :es5 :alpha])))
        #(go
           (<! (multi-animate!
                 {:a 1 :b low :duration t} [:es-captions :es5 :alpha]
                 {:a 0 :b 1 :duration t} [:es-captions :es6 :alpha])))
        #(go
           (<! (multi-animate!
                 {:a 1 :b low :duration t} [:es-captions :es6 :alpha]
                 {:a 0 :b 1 :duration t} [:es-captions :es7 :alpha])))
        #(go
           (<! (multi-animate!
                 {:a 1 :b low :duration t} [:es-captions :es7 :alpha]
                 {:a 0 :b 1 :duration t} [:es-captions :es8 :alpha])))
        ])
     ])))

(def num-slides

  (draw-js-core! (:js-core @state))
  (draw-js-face! (:js-face @state))
  (draw-es-captions! (:es-captions @state))
  (draw-highlight-layer! (:highlight-layer @state))

  (restore!))

