animate_it 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0675f1e382659072fd53a4b9453d2a44b1bf8a208075bc43974522195540df1f
-  data.tar.gz: c3804ff10fa75939fd23716e555054b64ea0ba45f1eaa9beb36c8b23e5b7c025
+  metadata.gz: 72d2eaa2997ddbdf969a2f9abaed9632439891facecc856352a9f24228895d58
+  data.tar.gz: 78e5d03556d7af69c22179095ef5ffd3d6c87622797e5ff6b114e87ee4411fe5
 SHA512:
-  metadata.gz: 06fe263c48072dc834609a78c5f3f3f09a2897872740e11d54fd8edcf2dcd986113ae1338ffd941f491077de0c4a3feb100cda5b679ef161052c8cbe123a55f3
-  data.tar.gz: d2f7f86b39e2aa3308dc98e9e6cd5bc4956716e03e0e81cc2a5857892ac9f1dea584634b13f3632450561285f361dbb3491964ac58a10296118e2a1375499b26
+  metadata.gz: 5031e03befe521c448ed4a68f4a7ef1774e5609286b6ee1f6f94ca5daf719c74a2adf852b79c18b8d2d297ad91572f7d7300077e1c7641eb46d2e5fefa8fa4ca
+  data.tar.gz: 29ce4f2eb2d61720a38815190ed173cd8f16bfde8b5c07e32fc5c7c42bfafc3e7b4c06121a574ff7941fe542ac5dc3a528166b486279e7e2d9a6a92f5350904c

data/CHANGELOG.md

@@ -6,6 +6,39 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-08-01
+
+### Added
+- Declarative schema-v2 track recording for sampled CSS variables, dynamic
+  text, word reveals, and compact keyframe tracks.
+- Browser-driven `/player` playback and export. Client-driven compositions
+  render once per structural layer and seek deterministically without a Rails
+  request for every frame.
+- `client_driven!`, `structure_epochs`, `track_vars`, `text_track`,
+  `verification_props`, and deterministic native CSS/Web Animation seeking.
+- Secure production frontend playback with explicit `public_player!`
+  allowlisting, a responsive `animate_it_player` iframe helper, autonomous
+  Play/Pause/loop transport, and synchronized byte-range audio.
+- Player-versus-filmstrip verification with RGB and alpha comparison, props
+  matrices, structural-boundary sampling, and an every-frame `verify_all` gate.
+- Checksum and provenance preflight for host-owned composition source assets.
+
+### Changed
+- Studio playback and seeking use the same client runtime as export for
+  client-driven compositions.
+- Animated outputs preserve declared audio trim, loop, gain, and partial-range
+  alignment; GIF and PNG outputs remain silent.
+- PNG sequences are published to their declared destination directory.
+- Declared outputs covering the same frame range now share one browser capture
+  instead of repeating every screenshot for each output format.
+- Removed the no-op Studio render-concurrency settings; capture remains
+  sequential so ordering, progress, and cancellation are deterministic.
+
+### Compatibility
+- Continued support for Ruby >= 3.3, Rails >= 7.2, HAML >= 6.3, HAML and ERB
+  sidecars, the packaged renderer executable, configurable mount paths and host
+  stylesheets, and the Rails 7.2 / Rails 8.1 appraisal matrix.
+
 ## [0.3.2] - 2026-07-23
 
 ### Fixed
@@ -63,7 +96,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `render_animate_it_video` executable and `animate_it:render` rake task.
 - `animate_it:install` generator.
 
-[Unreleased]: https://github.com/joinbuildit/animate_it/compare/v0.3.2...HEAD
+[Unreleased]: https://github.com/joinbuildit/animate_it/compare/v0.4.0...HEAD
+[0.4.0]: https://github.com/joinbuildit/animate_it/compare/v0.3.2...v0.4.0
 [0.3.2]: https://github.com/joinbuildit/animate_it/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/joinbuildit/animate_it/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/growth-constant/animate_it/compare/v0.2.0...v0.3.0

data/README.md

@@ -13,7 +13,7 @@
 <p align="center">
   <a href="https://github.com/growth-constant/animate_it/actions/workflows/ci.yml"><img src="https://github.com/growth-constant/animate_it/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
   <a href="https://rubygems.org/gems/animate_it"><img src="https://img.shields.io/gem/v/animate_it.svg" alt="Gem Version"></a>
-  <img src="https://img.shields.io/badge/ruby-%3E%3D%203.4-CC342D.svg" alt="Ruby >= 3.4">
+  <img src="https://img.shields.io/badge/ruby-%3E%3D%203.3-CC342D.svg" alt="Ruby >= 3.3">
 </p>
 
 ---
@@ -22,11 +22,11 @@
 **AnimateIt brings the same idea to Ruby on Rails** — without React, a JavaScript
 project, or a video editor.
 
-You describe a video as a Ruby class and a HAML template, preview it frame-by-frame
-in a bundled **Studio** UI, and render it to MP4/WebM/MOV/GIF. Every frame is a real
-web page, so you get the full power of CSS and — crucially — **your app's own
-components, styles, fonts, and real data**. A headless browser captures each frame
-and FFmpeg stitches them into a video.
+You describe a video as a Ruby class and a HAML or ERB template, preview it in a
+bundled **Studio** UI, and render it to MP4/WebM/MOV/GIF. The declarative runtime
+renders the template once per structural layer, records compact animation tracks,
+and seeks those tracks in the browser. You still get your app's own components,
+styles, fonts, and real data without asking Rails to render every frame.
 
 It's built for indie hackers and Rails developers who want to promote their projects
 with polished product demos, launch clips, and social ads — reusing the UI they've
@@ -72,10 +72,16 @@ and reload in development.
 # app/videos/hello_video.rb
 class HelloVideo < AnimateIt::Composition
   id "hello"
+  client_driven!
   fps 30
   size 1080, 1080
   duration 3.seconds
 
+  props do
+    integer :counter_start, default: 0
+  end
+  verification_props({}, { counter_start: 100 })
+
   assets_dir "app/assets/images/videos"
   output_basename "hello"
 
@@ -88,9 +94,16 @@ class HelloVideo < AnimateIt::Composition
   beat :intro, at: 0, length: 45
 
   class Scene < AnimateIt::Scene
+    track_vars :root do
+      { title_opacity: at_act(:intro, [0, 30], [0, 1]) }
+    end
+
+    text_track(:counter) { (props[:counter_start] + local_frame).to_s }
+
     def body
-      expose(vars: animation_vars(title_opacity: at_act(:intro, [0, 30], [0, 1])))
-      tag.div(class: "hero-render-canvas") { render_scene_template("canvas") }
+      absolute_fill(vars: :root) do
+        safe_join([render_scene_template("canvas"), animate_text(:counter)])
+      end
     end
   end
 
@@ -102,14 +115,73 @@ end
 -# app/videos/hello_video/canvas.html.haml
 :css
   .title { opacity: var(--title-opacity, 1); font-size: 6rem; font-weight: 800; }
-.stage{style: @vars}
+.stage
   .title Hello 👋
 ```
 
-Animation helpers (`at_global`, `at_act`, `beat_frame`, `beat_range`), a per-frame
-CSS-variable bag (`animation_vars`), named `beat`s, and `audio` / `audio_loop`
-tracks are all available. Compositions can render your app's real partials and
-ViewComponents — see `AnimateIt.config.render_stylesheets` below.
+Animation helpers (`at_global`, `at_act`, `beat_frame`, `beat_range`), sampled
+CSS variables (`track_vars`), dynamic text (`text_track`), named `beat`s, and
+`audio` / `audio_loop` tracks are available. Compositions can render your app's
+real partials and ViewComponents — see `AnimateIt.config.render_stylesheets`
+below.
+
+### Browser playback runtime
+
+`client_driven!` switches export and Studio playback to `/player`. Rails renders
+each structural layer once and records a schema-v2 track document; then
+`window.__animateIt.setFrame(frame)` updates CSS variables, text, layer
+visibility, word reveals, and native CSS/Web Animations without another frame
+request.
+
+Use `structure_epochs` only when a template's DOM shape changes. Each epoch adds
+one pre-rendered layer. Track schema v2 scopes bindings to their timeline segment;
+the player still accepts v1 documents and rejects unknown versions.
+
+```ruby
+structure_epochs 60, 120
+
+class Scene < AnimateIt::Scene
+  track_vars(:card) { { x: "#{at_global([0, 30], [-20, 0])}px" } }
+  text_track(:score) { (progress * 100).round }
+
+  def body
+    absolute_fill(vars: :card) do
+      safe_join([render_scene_template("canvas"), animate_text(:score)])
+    end
+  end
+end
+```
+
+### Production frontend playback
+
+Public playback is opt-in per composition. `public_player!` enables the
+standalone browser clock, Play/Pause control, looping, and synchronized
+music/voice/SFX. It does not expose Studio, frame, filmstrip, props, or render
+endpoints, and public playback always uses the composition's default props.
+
+```ruby
+class HelloVideo < AnimateIt::Composition
+  id "hello"
+  public_player! autoplay: false, loop: true
+  # ...
+end
+```
+
+Mount the engine in every environment, then embed the allowlisted composition
+from a host view:
+
+```ruby
+# config/routes.rb
+mount AnimateIt::Engine, at: AnimateIt.config.mount_path
+```
+
+```erb
+<%= animate_it_player "hello", title: "Hello product demo" %>
+```
+
+The iframe renders each structural layer once and advances entirely in the
+browser. Audio-capable players fall back to the visible Play button when the
+browser blocks autoplay.
 
 ### HAML or ERB
 
@@ -118,9 +190,9 @@ Scene sidecar templates can be authored in **HAML** (`canvas.html.haml`) or
 mix engines across scenes. The HAML canvas above is equivalent to:
 
 ```erb
--# app/videos/hello_video/canvas.html.erb
+<%# app/videos/hello_video/canvas.html.erb %>
 <style>.title { opacity: var(--title-opacity, 1); font-size: 6rem; font-weight: 800; }</style>
-<div class="stage" style="<%= @vars %>">
+<div class="stage">
   <div class="title">Hello 👋</div>
 </div>
 ```
@@ -130,8 +202,9 @@ app to use it — ERB-only apps work out of the box.
 
 ## Rendering
 
-The renderer needs your Rails **server running** (it drives a real browser against
-the Studio's filmstrip endpoint).
+The renderer needs your Rails **server running**. It drives a real browser
+against `/player` for client-driven compositions and the legacy `/filmstrip`
+endpoint for other compositions.
 
 ```bash
 # start the app
@@ -141,6 +214,10 @@ bin/rails server
 bin/rails 'animate_it:render[hello]'
 bin/rails 'animate_it:render[hello,0..45]'   # just a frame range
 
+# compare /player with the legacy /filmstrip (step 1 checks every frame)
+bin/rails 'animate_it:verify[hello,1]'
+bin/rails animate_it:verify_all
+
 # or the packaged CLI (writes to tmp/animate_it/ by default)
 bundle exec render_animate_it_video hello
 bundle exec render_animate_it_video hello tmp/hello.mp4
@@ -173,8 +250,42 @@ AnimateIt.configure do |config|
 end
 ```
 
-Render concurrency for the Studio's background renderer is tunable via
-`ANIMATE_IT_RENDER_CONCURRENCY` and `ANIMATE_IT_RENDER_STARTS_PER_SECOND`.
+When one composition declares multiple formats for the same frame range,
+AnimateIt captures the ordered Chromium frames once and reuses them for each
+encoder. Studio rendering intentionally keeps one sequential capture stream so
+frame ordering, progress, and cancellation stay deterministic.
+
+## Deterministic asset preflight
+
+Host applications can record local composition inputs in
+`config/animate_it_assets.yml`. `bin/rails animate_it:preflight` checks that each
+file exists, matches its SHA-256 checksum, and has a provenance provider. Media
+stays in the host app and is not packaged in the gem.
+
+```yaml
+version: 1
+assets:
+  - path: app/audio/launch/music.mp3
+    kind: music
+    compositions: [hello]
+    sha256: 0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef
+    provenance:
+      provider: elevenlabs
+      generated_with_ai: true
+      model_id: not-recorded
+      generation_id: not-recorded
+```
+
+For parameterized compositions, declare `verification_props` or override them
+at the command line:
+
+```bash
+ANIMATE_IT_PROPS_JSON='{"title":"Variant"}' bin/rails 'animate_it:verify[hello,1]'
+ANIMATE_IT_PROPS_MATRIX_JSON='[{}, {"title":"Variant"}]' bin/rails animate_it:verify_all
+```
+
+Verification requires a running server and writes comparison screenshots under
+`tmp/animate_it/verify`.
 
 ## Claude skill
 
@@ -195,6 +306,7 @@ The skill source lives in [`skills/`](skills/).
 bin/setup                # bundle install
 bundle exec rspec        # unit + request specs (uses spec/dummy)
 bundle exec rubocop
+gem build animate_it.gemspec
 
 # full render smoke test (needs ffmpeg + Playwright chromium)
 RUN_RENDER_SMOKE=1 bundle exec rspec spec/rendering_spec.rb

data/app/controllers/animate_it/frames_controller.rb

@@ -18,5 +18,12 @@ module AnimateIt
       @composition = composition
       @props = preview_props
     end
+
+    def player
+      @composition = composition
+      @props = preview_props
+      @track_document = @composition.track_document(props: @props)
+      TrackDocumentSchema.validate!(@track_document)
+    end
   end
 end

data/app/controllers/animate_it/public_players_controller.rb

@@ -0,0 +1,69 @@
+module AnimateIt
+  # The only production-accessible AnimateIt surface. Compositions must opt in
+  # explicitly with `public_player!`; all Studio and rendering controllers keep
+  # their local-environment guard.
+  class PublicPlayersController < ApplicationController
+    AUDIO_BASE = Rails.root.join("app/audio").freeze
+
+    layout false
+    skip_before_action :ensure_local_environment
+    before_action :ensure_public_player
+
+    def show
+      @props = {}
+      @track_document = composition.track_document
+      TrackDocumentSchema.validate!(@track_document)
+      @audio_segments = audio_segments
+      @public_player = true
+      @public_player_options = composition.public_player_options
+      render "animate_it/frames/player"
+    end
+
+    def audio
+      segment = audio_segments[params[:index].to_i]
+      return head :not_found unless segment
+
+      file_path = resolve_audio_path(segment.source[:path])
+      return head :not_found unless file_path
+
+      serve_with_byte_ranges(file_path)
+    end
+
+    private
+
+    def ensure_public_player
+      head :not_found unless composition.public_player? && composition.client_driven?
+    end
+
+    def audio_segments
+      @audio_segments ||= composition.timeline.segments.select { |segment| segment.kind == :audio }
+    end
+
+    def public_audio_path(index)
+      animate_it_path("/public/compositions/#{composition.id}/audio/#{index}")
+    end
+    helper_method :public_audio_path
+
+    def serve_with_byte_ranges(file_path)
+      status, headers, body = Rack::Files.new(file_path.dirname.to_s).serving(request, file_path.to_s)
+      headers["content-type"] = Mime::Type.lookup_by_extension(file_path.extname.delete(".")).to_s
+      headers["content-disposition"] = "inline"
+      headers["accept-ranges"] = "bytes"
+      self.status = status
+      self.response_body = body
+      headers.each { |key, value| response.headers[key] = value }
+    end
+
+    def resolve_audio_path(path)
+      return if path.blank?
+
+      base = AUDIO_BASE.realpath
+      candidate = Pathname.new(path)
+      candidate = base.join(candidate) unless candidate.absolute?
+      resolved = candidate.realpath
+      resolved if resolved.to_s.start_with?("#{base}#{File::SEPARATOR}")
+    rescue Errno::ENOENT, Errno::EACCES
+      nil
+    end
+  end
+end

data/app/controllers/animate_it/renders_controller.rb

@@ -32,7 +32,7 @@ module AnimateIt
         output_path: @output_path
       )
       start_render(@render_id, @composition.id, request.base_url, @output_path.to_s, frames_dir(@render_id).to_s,
-                   preview_props, render_options)
+                   preview_props)
 
       render status: :accepted
     end
@@ -57,24 +57,10 @@ module AnimateIt
       path&.relative_path_from(Rails.root)&.to_s
     end
 
-    def render_options
-      {
-        "concurrency" => env_with_legacy("ANIMATE_IT_RENDER_CONCURRENCY", "RAILS_MOTION_RENDER_CONCURRENCY", "3").to_i,
-        "starts_per_second" => env_with_legacy("ANIMATE_IT_RENDER_STARTS_PER_SECOND",
-                                               "RAILS_MOTION_RENDER_STARTS_PER_SECOND", "2").to_f
-      }
-    end
-
-    # Prefer the new ANIMATE_IT_* name; fall back to the legacy RAILS_MOTION_*
-    # name for one release so existing setups don't break, then the default.
-    def env_with_legacy(new_key, legacy_key, default)
-      ENV[new_key].presence || ENV[legacy_key].presence || default
-    end
-
-    def start_render(render_id, composition_id, host, output_path, frame_dir, props, options)
+    def start_render(render_id, composition_id, host, output_path, frame_dir, props)
       Thread.new do
         Rails.application.executor.wrap do
-          RenderJob.perform_now(render_id, composition_id, host, output_path, frame_dir, props, options)
+          RenderJob.perform_now(render_id, composition_id, host, output_path, frame_dir, props)
         end
       end
     end

data/app/controllers/animate_it/studio_controller.rb

@@ -9,6 +9,7 @@ module AnimateIt
       @composition = composition
       @compositions = AnimateIt.compositions
       @frame_base_url = animate_it_path("/compositions/#{@composition.id}/frame")
+      @player_url = animate_it_path("/compositions/#{@composition.id}/player")
       @last_frame = @composition.duration_in_frames - 1
       @props_json = JSON.pretty_generate(@composition.props.defaults)
       @renders = RenderStore.all

data/app/jobs/animate_it/render_job.rb

@@ -2,6 +2,8 @@ module AnimateIt
   class RenderJob < ApplicationJob
     queue_as :default
 
+    # `_options` remains as a compatibility slot for render jobs serialized by
+    # releases that exposed concurrency settings but never applied them.
     def perform(render_id, composition_id, host, output_path, frames_dir, props = {}, _options = {})
       AnimateIt.load_compositions!
       composition = AnimateIt.registry.fetch(composition_id)

data/app/views/animate_it/frames/filmstrip.html.haml

@@ -24,6 +24,9 @@
       body, main, .hero-render-canvas {
         background-color: transparent !important;
       }
+      *, *::before, *::after {
+        transition: none !important;
+      }
       .animate-it-frame {
         position: absolute;
         inset: 0;
@@ -40,26 +43,54 @@
   %body
     - (0...@composition.duration_in_frames).each do |frame|
       .animate-it-frame{ class: ('is-active' if frame.zero?), data: { frame: frame } }
-        = @composition.render_frame(self, frame: frame, props: @props)
+        = @composition.render_frame(self, frame: frame, props: @props, segment_origins: true)
     -# See app/views/animate_it/frames/show.html.haml for why these are at the
     -# bottom of body. Host-app accumulator helpers — emit only when present.
     - if respond_to?(:render_page_stylesheets)
       = render_page_stylesheets
     - if respond_to?(:render_component_stylesheets)
       = render_component_stylesheets
+    = javascript_tag AnimateIt::Runtime.source.html_safe
     :javascript
       (() => {
         const frames = Array.from(document.querySelectorAll(".animate-it-frame"));
+        const segmentRoots = new WeakMap();
+        frames.forEach((frame) => {
+          const segments = Array.from(frame.querySelectorAll(":scope > [data-animate-it-segment-origin]"));
+          segmentRoots.set(frame, segments.map((segment) => {
+            const entry = {
+              origin: Number(segment.dataset.animateItSegmentOrigin) || 0,
+              roots: Array.from(segment.children)
+            };
+            segment.replaceWith(...segment.childNodes);
+            return entry;
+          }));
+        });
         let active = frames[0] || null;
         window.__animateIt = {
           totalFrames: frames.length,
           setFrame(n) {
-            const target = frames[n];
-            if (!target || target === active) return;
-            if (active) active.classList.remove("is-active");
-            target.classList.add("is-active");
-            active = target;
+            const frame = Math.max(0, Math.min(frames.length - 1, Math.round(Number(n) || 0)));
+            const target = frames[frame];
+            if (!target) return frame;
+            if (target !== active) {
+              if (active) active.classList.remove("is-active");
+              target.classList.add("is-active");
+              active = target;
+            }
+            const segments = segmentRoots.get(target) || [];
+            if (segments.length) {
+              segments.forEach((segment) => {
+                segment.roots.forEach((root) => {
+                  window.AnimateItRuntimeApi.seekAnimations(root, frame - segment.origin, #{@composition.fps});
+                });
+              });
+            } else {
+              window.AnimateItRuntimeApi.seekAnimations(target, frame, #{@composition.fps});
+            }
+            return frame;
           }
         };
+        window.__animateIt.setFrame(0);
         document.documentElement.dataset.animateItReady = "1";
       })();

data/app/views/animate_it/frames/player.html.haml

@@ -0,0 +1,81 @@
+!!!
+%html{ lang: "en" }
+  %head
+    %title= "#{@composition.id} player (#{@composition.duration_in_frames} frames)"
+    %meta{ name: "viewport", content: "width=#{@composition.width}, initial-scale=1" }
+    - AnimateIt.config.render_stylesheets.each do |sheet|
+      = stylesheet_link_tag sheet, "data-turbo-track": "reload"
+    :css
+      html, body {
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      body {
+        zoom: #{@composition.zoom};
+      }
+      body, main, .hero-render-canvas {
+        background-color: transparent !important;
+      }
+      *, *::before, *::after {
+        transition: none !important;
+      }
+      .animate-it-stage {
+        position: absolute;
+        inset: 0;
+        width: #{@composition.width}px;
+        height: #{@composition.height}px;
+        overflow: hidden;
+      }
+      .animate-it-layer {
+        position: absolute;
+        inset: 0;
+        display: none !important;
+        visibility: hidden;
+      }
+      .animate-it-layer.is-active {
+        display: block !important;
+        visibility: visible;
+      }
+      .animate-it-public-play {
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 2147483647;
+        border: 0;
+        border-radius: 999px;
+        padding: 10px 18px;
+        background: rgba(0, 0, 0, 0.78);
+        color: #fff;
+        font: 600 14px/1 system-ui, sans-serif;
+        cursor: pointer;
+      }
+  %body
+    .animate-it-stage
+      = @composition.render_structure(self, props: @props)
+    - if respond_to?(:render_page_stylesheets)
+      = render_page_stylesheets
+    - if respond_to?(:render_component_stylesheets)
+      = render_component_stylesheets
+    - if @public_player
+      - @audio_segments.each_with_index do |segment, index|
+        %audio{ data: {
+                  from_frame: segment.from_frame,
+                  duration_frames: segment.duration_frames || (@composition.duration_in_frames - segment.from_frame),
+                  gain: segment.source[:gain],
+                  loop: segment.source[:loop] ? "true" : "false"
+                },
+                preload: "auto",
+                src: public_audio_path(index),
+                style: "display:none" }
+      %button.animate-it-public-play{ type: "button", data: { animate_it_play: true }, aria: { pressed: "false" } } Play
+    %script{ type: "application/json", data: {
+      animate_it_tracks: true,
+      animate_it_transport: @public_player ? "true" : "false",
+      animate_it_autoplay: @public_player_options&.fetch(:autoplay, false) ? "true" : "false",
+      animate_it_loop: @public_player_options&.fetch(:loop, true) ? "true" : "false"
+    } }
+      != ERB::Util.json_escape(@track_document.to_json)
+    = javascript_tag AnimateIt::Runtime.source.html_safe

data/app/views/animate_it/studio/_preview_pane.html.haml

@@ -10,7 +10,7 @@
   %turbo-frame#animate_it_preview.animate-it-preview
     %iframe#animate_it_frame{
       title: "#{composition.id} frame preview",
-      src: "#{frame_base_url}/0?pp=disable",
+      src: composition.client_driven? ? "#{player_url}?pp=disable" : "#{frame_base_url}/0?pp=disable",
       style: "width: min(100%, #{composition.width}px); aspect-ratio: #{composition.width} / #{composition.height};"
     }
 

data/app/views/animate_it/studio/_props_pane.html.haml

@@ -9,6 +9,7 @@
 
   %section.animate-it-renders
     %h3 Rendering jobs
-    = turbo_stream_from AnimateIt::RenderStore::CHANNEL
-    %p.animate-it-stream-status Turbo Stream connected for render progress.
+    - if respond_to?(:turbo_stream_from)
+      = turbo_stream_from AnimateIt::RenderStore::CHANNEL
+      %p.animate-it-stream-status Turbo Stream connected for render progress.
     = AnimateIt::RenderStore.html.html_safe