--- a/light9/web/edit-choice.html	Sat Jun 10 07:17:20 2017 +0000
+++ b/light9/web/edit-choice.html	Sat Jun 10 08:38:39 2017 +0000
@@ -12,11 +12,12 @@
          background: rgba(126, 52, 245, 0.0784313725490196);
      }
      a {
-         color: #5555e0;
+         color: #8e8eff;
          padding: 3px;
          display: inline-block;
+         font-size: 145%;
      }
-    
+     
      
     </style>
     <div id="box">

--- a/light9/web/timeline/adjustable.coffee	Sat Jun 10 07:17:20 2017 +0000
+++ b/light9/web/timeline/adjustable.coffee	Sat Jun 10 08:38:39 2017 +0000
@@ -123,7 +123,6 @@
     throw new Error('multi subscribe not implemented') if @_onChange
     @_onChange = onChange
 
-    
   continueDrag: (pos) ->
     # pos is vec2 of pixels relative to the drag start
     super(pos)
@@ -132,3 +131,50 @@
     @config.graph.patchObject(@config.subj, @config.pred,
                               @config.graph.LiteralRoundedFloat(newValue),
                               @config.ctx)
+                              
+class window.AdjustableFade extends Adjustable
+  constructor: (@yForV, @i0, @i1, @note, offset) ->
+    @config = {
+      getSuggestedTargetOffset: -> offset
+      getTarget: @getTarget.bind(@)
+    }
+    super(@config)
+
+  getTarget: ->
+    mid = @note.worldPts[@i0].x(.5).add(@note.worldPts[@i1].x(.5))
+    $V([@note.zoomInX(mid.e(1)), @yForV(mid.e(2))])
+
+  _getValue: ->
+    mid = @note.worldPts[@i0].x(.5).add(@note.worldPts[@i1].x(.5))
+    mid.e(1)
+
+   continueDrag: (pos) ->
+    # pos is vec2 of pixels relative to the drag start
+    super(pos)
+    graph = @note.graph
+    U = (x) => graph.Uri(x)
+
+    goalCenterSec = @note.zoomInX.invert(@initialTarget.e(1) + pos.e(1))
+
+    diamSec = @note.worldPts[@i1].e(1) - @note.worldPts[@i0].e(1)
+    newSec0 = goalCenterSec - diamSec / 2
+    newSec1 = goalCenterSec + diamSec / 2
+
+    originSec = graph.floatValue(@note.uri, U(':originTime'))
+
+    ctx = @note.song
+    p0 = @_makePatch(graph, @i0, newSec0, originSec, ctx)
+    p1 = @_makePatch(graph, @i1, newSec1, originSec, ctx)
+
+    graph.applyAndSendPatch(@_addPatches(p0, p1))
+
+  _makePatch: (graph, idx, newSec, originSec, ctx) ->
+    graph.getObjectPatch(@note.worldPts[idx].uri,
+                         graph.Uri(':time'),
+                         graph.LiteralRoundedFloat(newSec - originSec), ctx)
+
+  _addPatches: (p0, p1) ->
+    {
+      addQuads: p0.addQuads.concat(p1.addQuads),
+      delQuads: p0.delQuads.concat(p1.delQuads)
+    }
\ No newline at end of file

--- a/light9/web/timeline/timeline.coffee	Sat Jun 10 07:17:20 2017 +0000
+++ b/light9/web/timeline/timeline.coffee	Sat Jun 10 08:38:39 2017 +0000
@@ -275,6 +275,9 @@
       }))
       
 
+# plan: in here, turn all the notes into simple js objects with all
+# their timing data and whatever's needed for adjusters. From that, do
+# the brick layout. update only changing adjusters.
 Polymer
   is: 'light9-timeline-time-zoomed'
   behaviors: [ Polymer.IronResizableBehavior ]
@@ -511,6 +514,7 @@
     else
       @_makeOffsetAdjuster(yForV, curveWidthCalc)
       @_makeCurvePointAdjusters(yForV, @worldPts)
+      @_makeFadeAdjusters(yForV)
 
   _updateInlineAttrs: (screenPts) ->
     leftX = Math.max(2, screenPts[Math.min(1, screenPts.length - 1)].e(1) + 5)
@@ -596,6 +600,15 @@
         getSuggestedTargetOffset: () => $V([-10, 0])
       })
       adj
+
+  _makeFadeAdjusters: (yForV) ->
+    @_makeFadeAdjuster(yForV, @uri + '/fadeIn', 0, 1, $V([-50, -10]))
+    n = @worldPts.length
+    @_makeFadeAdjuster(yForV, @uri + '/fadeOut', n - 2, n - 1, $V([50, -10]))
+
+  _makeFadeAdjuster: (yForV, adjId, i0, i1, offset) ->
+    @adjusterIds[adjId] = true
+    @setAdjuster adjId, => new AdjustableFade(yForV, i0, i1, @, offset)
     
   _suggestedOffset: (pt) ->
     if pt.e(2) > .5
@@ -969,7 +982,6 @@
     @_updateNotePathClasses(uri, elem)
 
   _addNoteListeners: (elem, uri) ->
-    log("new note listeneers", uri)
     elem.addEventListener 'mouseenter', =>
       @selection.hover(uri)
     elem.addEventListener 'mousedown', (ev) =>