Slop Machine

React <SlopVideo /> ​

The @slopmachine/react package provides a top-tier Developer Experience (DX) for seamlessly rendering Slop Machine generated videos in your React applications.

By default, the component handles loading states with a nice built-in shimmer effect and loading spinner. It ensures the layout respects the aspectRatio without layout shifts (CLS), and cleanly fades in the final video once it is ready.

Installation ​

bash
npm install @slopmachine/react

Basic Usage ​

The minimum required prop is bucketId. This ties the component to a specific AI generation task.

tsx
import { SlopVideo } from "@slopmachine/react";

function MyGallery() {
  return (
    <div className="w-64">
      <SlopVideo bucketId="my-unique-video-bucket" />
    </div>
  );
}

Advanced Usage ​

You can override variables, specify an aspect ratio, pick a model, and even override the default loading skeleton via the loader prop. SlopVideo also inherits standard <video> attributes (excluding src, which is managed for you).

tsx
import { SlopVideo } from "@slopmachine/react";

function PromoVideo() {
  return (
    <SlopVideo
      bucketId="promo-video-bucket"
      aspectRatio="16:9"
      variables={{ theme: "cyberpunk", speed: "fast" }}
      className="rounded-lg shadow-xl"
      autoPlay
      loop
      muted
      loader={
        <div className="flex h-full items-center justify-center text-blue-500 bg-gray-900 rounded-lg">
          Generating custom video...
        </div>
      }
    />
  );
}

Loading States ​

To detect when the generation and loading is complete, you can pass standard HTML onLoadedData and onError event handlers to the component. These events are forwarded to the underlying <video> element and will not override the built-in loading shimmer effect.

You can also completely customize the loading UI by providing a custom loader prop.

Preloading ​

You can import and use preloadVideo from @slopmachine/react to cache the asset before rendering the component.

tsx
import { preloadVideo } from "@slopmachine/react";

// Call this early in your component lifecycle or route loader
preloadVideo({ bucketId: "my-unique-video-bucket" });

Props Reference ​

The SlopVideo component inherits from SlopVideoOptions, adding a loader property and standard HTML video attributes.

bucketId ​

Type: string (Required) The unique identifier for the specific video generation session/bucket.

aspectRatio ​

Type: "9:16" | "16:9" (Optional, Default: "16:9") Sets the CSS aspect ratio of the wrapper element to prevent layout shifts. Examples: "16:9", "9:16".

duration ​

Type: number (Optional, Default: 4) The duration of the generated video in seconds. Must be between 4 and 8. Ignored if resultId is provided.

model ​

Type: string (Optional) Specify the underlying generative AI video model to use.

version ​

Type: number (Optional) Useful for cache-busting or fetching a specific generation iteration.

resultId ​

Type: string (Optional) If a specific result ID is known, it can be fetched directly.

original ​

Type: boolean (Optional, Default: false) If true, bypasses the optimized media and returns the original generated file.

variables ​

Type: Record<string, string | number | undefined | null> (Optional) A dictionary of prompt variables interpolated dynamically. Example: { subject: "dog", style: "neon" }. Any extraneous or unused variables provided that are not required by the resolved templates are automatically stripped out to ensure they do not unnecessarily bust the cache.

attachments ​

Type: string[] (Optional) An array of string URLs representing temporary file attachments to be used by the generative AI model.

baseUrl ​

Type: string (Optional) Override the default Slop Machine API URL if you are using a self-hosted or proxy backend.

loader ​

Type: React.ReactNode (Optional) Replaces the default spinner and shimmer effect. Render a custom skeleton or text while the video is loading.

HTML <video> Props ​

You can pass standard attributes like className, style, onLoad, onError, autoPlay, loop, muted, controls, etc. The className and style props will be applied to the outer wrapper div, while most event handlers and video-specific attributes are spread onto the underlying <video> element.