diff --git a/app/schemas/subscriptions/play.coffee b/app/schemas/subscriptions/play.coffee
index bdbab754a..ccdd3d0a7 100644
--- a/app/schemas/subscriptions/play.coffee
+++ b/app/schemas/subscriptions/play.coffee
@@ -101,6 +101,9 @@ module.exports =
 
   'playback:real-time-playback-ended': c.object {}
 
+  'playback:ended-changed': c.object {required: ['ended']},
+    ended: {type: 'boolean'}
+
   'level:play-next-level': c.object {}
 
   'level:toggle-playing': c.object {}
diff --git a/app/styles/play/level/tome/spell.sass b/app/styles/play/level/tome/spell.sass
index e3dd4e564..6b37b5c8e 100644
--- a/app/styles/play/level/tome/spell.sass
+++ b/app/styles/play/level/tome/spell.sass
@@ -87,6 +87,10 @@
       @include gradient-striped()
       outline: 2px outset #0099ff
       @include box-shadow(1px 1px 4px black)
+    &.playback-ended .executing
+      background-color: rgba(50, 255, 80, 0.65)
+      outline: 0
+      @include box-shadow(0 0 0px black)
     .executed
       background-color: rgba(110, 110, 110, 0.12)
     .problem-marker-info
@@ -96,9 +100,10 @@
     .problem-marker-error
       background-color: rgba(110, 45, 27, 0.25)
 
-    .executing:not(.ace_gutter-cell)
-      background-size: 40px 40px
-      @include animation(progress-bar-stripes 0.5s linear infinite)
+    &:not(.playback-ended)
+      .executing:not(.ace_gutter-cell)
+        background-size: 40px 40px
+        @include animation(progress-bar-stripes 0.5s linear infinite)
 
     .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info)
       margin-left: 1px
diff --git a/app/views/play/level/LevelPlaybackView.coffee b/app/views/play/level/LevelPlaybackView.coffee
index 31b495642..f913bec39 100644
--- a/app/views/play/level/LevelPlaybackView.coffee
+++ b/app/views/play/level/LevelPlaybackView.coffee
@@ -250,13 +250,18 @@ module.exports = class LevelPlaybackView extends CocoView
     $('.scrubber .progress-bar', @$el).css('width', "#{progress * 100}%")
 
   updatePlayButton: (progress) ->
+    playButton = @$el.find('#play-button')
+    wasEnded = playButton.hasClass('ended')
     if @worldCompletelyLoaded and progress >= 0.99 and @lastProgress < 0.99
-      $('#play-button').removeClass('playing').removeClass('paused').addClass('ended')
+      playButton.removeClass('playing').removeClass('paused').addClass('ended')
       Backbone.Mediator.publish 'level:set-letterbox', on: false if @realTime
       Backbone.Mediator.publish 'playback:real-time-playback-ended', {} if @realTime
     if progress < 0.99 and @lastProgress >= 0.99
-      b = $('#play-button').removeClass('ended')
-      if @playing then b.addClass('playing') else b.addClass('paused')
+      playButton.removeClass('ended')
+      playButton.addClass(if @playing then 'playing' else 'paused')
+    isEnded = playButton.hasClass('ended')
+    if wasEnded isnt isEnded
+      Backbone.Mediator.publish 'playback:ended-changed', ended: isEnded
 
   onRealTimePlaybackEnded: (e) ->
     return unless @realTime
diff --git a/app/views/play/level/tome/SpellView.coffee b/app/views/play/level/tome/SpellView.coffee
index c9b785122..f62fee15a 100644
--- a/app/views/play/level/tome/SpellView.coffee
+++ b/app/views/play/level/tome/SpellView.coffee
@@ -53,6 +53,7 @@ module.exports = class SpellView extends CocoView
     'tome:spell-beautify': 'onSpellBeautify'
     'tome:maximize-toggled': 'onMaximizeToggled'
     'script:state-changed': 'onScriptStateChange'
+    'playback:ended-changed': 'onPlaybackEndedChanged'
 
   events:
     'mouseout': 'onMouseOut'
@@ -845,6 +846,9 @@ module.exports = class SpellView extends CocoView
   onScriptStateChange: (e) ->
     @scriptRunning = if e.currentScript is null then false else true
 
+  onPlaybackEndedChanged: (e) ->
+    $(@ace?.container).toggleClass 'playback-ended', e.ended
+
   checkRequiredCode: =>
     return if @destroyed
     source = @getSource().replace @singleLineCommentRegex(), ''