This file contains the concatenated content of all cards to help LLMs understand the available documentation.
Welcome to Spoof, the "Hollywood OS" platform for creating and controlling Fantasy/Fake/Fictional User Interfaces (FUIs). This guide will help you create immersive, controllable screens for film and television productions.
A FUI in Spoof is essentially a web page. You can deliver it as:
index.html file with inline CSS/JS (best for simple screens)..3ui Archive: A standard ZIP file (renamed to .3ui) containing an index.html at the root and associated assets (images, css, js).Include the Spoof SDK in your HTML to interact with the platform.
<script type="module">
import spoof from 'https://spoof.3sln.com/s/sdk';
</script>
spoof-config)Define variables that the operator can customize (e.g., text, colors, images). Add a <script type="spoof-config"> block with a JSON array of field definitions.
Supported Types:
text, number, boolean, color, select{ "type": "group", "fields": [...] } (Use minValues/maxValues for arrays){ "type": "file", "accept": "image/*" } (Returns a Blob or URL string){ "type": "ref", "targetKey": "...", "targetLabelKey": "..." } (Select from a group){ "type": "slot" } (See "Nested FUIs" below)Example:
<script type="spoof-config">
[
{ "key": "com.example.corp.sys.name", "label": "System Name", "type": "text", "default": "MAIN FRAME" },
{ "key": "com.example.corp.sys.alert", "label": "Alert Level", "type": "select", "options": ["LOW", "HIGH"], "default": "LOW" }
]
</script>
Accessing Config:
spoof.config('com.example.corp.sys.name').subscribe(value => {
document.getElementById('title').innerText = value;
});
spoof-commands)Define actions the operator can trigger from the dashboard.
Definition:
<script type="spoof-commands">
[
{ "key": "com.example.corp.cmd.launch", "label": "Launch Missiles", "params": [] }
]
</script>
Implementation:
spoof.commands['com.example.corp.cmd.launch'] = () => {
startLaunchSequence();
};
spoof-signals)Define feedback sent from the FUI to the operator (e.g., for sound effects or automation).
Definition:
<script type="spoof-signals">
[
{ "key": "com.example.corp.sig.complete", "label": "Launch Complete", "info": "Fires when sequence ends" }
]
</script>
Usage:
function startLaunchSequence() {
// ... animation ...
spoof.signals['com.example.corp.sig.complete']({ status: 'success' });
}
spoof-widgets)Automatically create buttons on the operator's dashboard.
<script type="spoof-widgets">
[
{
"key": "com.example.corp.wig.launch",
"label": "LAUNCH",
"type": "button",
"commandKey": "com.example.corp.cmd.launch",
"params": {}
}
]
</script>
Use spoof.signal (an AbortSignal) to clean up resources when your FUI is unloaded.
const timer = setInterval(updateClock, 1000);
spoof.signal.addEventListener('abort', () => clearInterval(timer));
You can embed other FUIs inside your main FUI using "Slots". This is useful for "Picture-in-Picture" modes or multi-window OS simulations.
Define a Slot Config:
{ "key": "com.example.corp.view.aux", "type": "slot", "label": "Aux View" }
Render the Slot:
The config value will be a slotId string. Create a <spoof-slot> element and set its slot-id attribute.
spoof.config('com.example.corp.view.aux').subscribe(slotId => {
const container = document.getElementById('aux-container');
container.innerHTML = '';
if (slotId) {
const slot = document.createElement('spoof-slot');
slot.slotId = slotId;
// Style it to fill the container
slot.style.width = '100%';
slot.style.height = '100%';
container.appendChild(slot);
} else {
container.innerText = "NO SIGNAL";
}
});
Nested FUIs run in an iframe, but <spoof-slot> intercepts their history navigation events (pushState, replaceState, go, back, forward).
You can listen for nav:* events on the <spoof-slot> element to drive custom UI logic (like a URL bar) in your parent FUI.
Supported Events: nav:pushState, nav:replaceState, nav:go, nav:back, nav:forward.
const slot = document.querySelector('spoof-slot');
slot.addEventListener('nav:pushState', (e) => {
console.log("Nested FUI navigating to:", e.detail.args[2]);
});
If you want to completely disable the browser's default history behavior within the slot (e.g., to implement your own custom "Back" logic or prevent the user from actually navigating the iframe), use the spoof-options script block.
<script type="spoof-options">
{
"hijackHistoryAndEnableBackEvent": true
}
</script>
When hijackHistoryAndEnableBackEvent is enabled:
window.history.back(), pushState(), etc., inside the FUI will throw an error and be blocked.window object will receive a custom back event instead of performing a navigation.// Inside your FUI
window.addEventListener('back', () => {
if (myModal.isOpen) {
myModal.close();
} else {
// Maybe tell the parent to close the slot
}
});
The Console App allows you to write persistent JavaScript to automate interactions across multiple screens.
API:
console.log(...): Log to the Console's output panel.spoof.command(key, params): Send a command to all screens.spoof.signal(key).subscribe(callback): Listen for signals from screens.spoof.bus.subscribe(pattern, callback): Listen to the internal event bus.Example Script:
// Auto-trigger 'Access Granted' on all screens when 'Password Correct' signal is received
spoof.signal('com.example.corp.login.sig.success').subscribe(payload => {
console.log('Login successful by:', payload.user);
setTimeout(() => {
spoof.command('com.example.corp.main.cmd.grant_access', {});
}, 500);
});
com.production.scene.element.key) to avoid conflicts..3ui archive instead of using CDNs, as internet access on set is unreliable.if (window.spoof) before accessing the SDK, or provide fallbacks, so you can test your FUI in a standard browser during development.<spoof-slot>, render it pre-emptively and toggle its visibility (e.g., via CSS display: none or opacity: 0) instead of creating the element on demand. Because slots need to initialize their own virtual environment, on-demand rendering can cause a noticeable delay or "clunky" loading experience. Pre-rendering ensures the nested FUI is ready to appear instantly.Spoof is designed to be AI-friendly. Because it uses standard web technologies (HTML/CSS/JS) and a simple, declarative configuration system, modern Large Language Models (LLMs) are exceptionally good at generating high-quality interfaces for the platform.
To get an LLM (like ChatGPT, Claude, or Gemini) up to speed on Spoof's specific SDK and philosophy, you can provide it with our LLM Prelude. This document contains all the technical context the model needs to write correct code for the Spoof environment.
Direct Link to Prelude: https://spoof.3sln.com/llm
Simply copy the content from that page and paste it as the first message in your chat session.
For users of Google Gemini, we provide a pre-configured Gemini Gem. This allows you to start building immediately with all the Spoof context already baked into the model's instructions.
CLICK HERE TO USE THE SPOOF GEMINI GEM (Placeholder for custom Gem link)
When prompting an AI to build a FUI, keep these tips in mind to get the best results:
index.html file with all CSS and JS inline. This makes it easy to test and upload to the Console.<use href="#icon-id"> references. This keeps the markup clean and efficient.<script type="spoof-commands"> and <script type="spoof-widgets"> blocks.spoof-slot for any pluggable or swappable parts of the FUI. This offers a great deal of composability and flexibility, allowing the operator to nest other FUIs within your main interface.spoof.signal to clean up intervals or animations when the FUI is unloaded.The Spoof Demo Runner is a powerful tool for embedding interactive Fictional User Interfaces (FUIs) directly into your own websites or documentation. It provides a sandboxed environment that can render any valid Spoof FUI without requiring a full console session.
The runner is hosted at:
https://spoof.3sln.com/d
The simplest way to load a FUI is by passing a URL to the file via the u query parameter. This is ideal for static demos where the FUI file is hosted publicly.
Example:
<iframe
src="https://spoof.3sln.com/d?u=https://example.com/my-fui.html"
width="100%"
height="600px"
style="border: none;">
</iframe>
Requirements:
u must be a valid .html (single file) or .3ui (zip) file.spoof.3sln.com to fetch it.Access-Control-Allow-Origin: *For dynamic scenarios—such as live code editors, AI chat interfaces, or private content—you can programmatically inject the FUI content using the postMessage API.
This method allows you to push raw HTML or binary .3ui data directly into the runner iframe.
Send a message with the following structure to the iframe's window:
{
type: 'load-fui',
payload: <EncodedPayload>
}
The payload must be encoded using Spoof's JSON-Bin codec format. This format safely serializes binary data (like Zips) over JSON.
Since the runner expects a specific binary-safe JSON format, you must structure your payload correctly. The payload must decode to a Blob.
For Raw HTML:
Convert the HTML string to a Blob and send it.
const iframe = document.querySelector('iframe');
const htmlContent = "<html><body><h1>Hello World</h1></body></html>";
const blob = new Blob([htmlContent], { type: 'text/html' });
// Send message
iframe.contentWindow.postMessage({
type: 'load-fui',
payload: blob
}, '*');
For Binary Data (.3ui / Zip):
If you have a binary blob (e.g., a generated .3ui file), you should wrap it in a Blob object.
// Example: Fetch a local zip and send it
const response = await fetch('./my-project.3ui');
const blob = await response.blob();
// The codec expects the Blob to be passed directly in the payload.
// The runner handles decoding and extraction.
iframe.contentWindow.postMessage({
type: 'load-fui',
payload: blob
}, '*');
Note: The runner automatically detects the content type from the Blob.
Here is a conceptual example of a live HTML editor that updates the preview as you type:
const editor = document.getElementById('code-editor');
const preview = document.getElementById('spoof-preview');
editor.addEventListener('input', () => {
const html = editor.value;
const blob = new Blob([html], { type: 'text/html' });
preview.contentWindow.postMessage({
type: 'load-fui',
payload: blob
}, '*');
});
Spoof is a specialized platform designed for the unique needs of film and television production. It enables the creation, orchestration, and real-time control of Fictional User Interfaces (FUIs)—the "fake" computer screens seen on camera.
In the industry, these are often referred to as "playback" or "screen graphics." Spoof modernizes this workflow by turning any device with a web browser into a controllable prop.
Imagine a scene where a hacker types furiously, a progress bar fills up, and 'ACCESS GRANTED' flashes across three different monitors simultaneously. Spoof is the operating system that makes that happen.
Because Spoof is built entirely on standard web technologies (HTML/CSS/JS), it is in a unique position to leverage the power of Generative AI.
Large Language Models (LLMs) are exceptionally proficient at writing code for the web. By combining this capability with Spoof's declarative configuration system, you can generate complex, cinematic interfaces in seconds rather than hours. This allows production teams to iterate rapidly and create customized graphics on the fly.
Check out our Building FUIs with AI guide to learn how to put an LLM to work on your production.
To start a new project, visit https://spoof.3sln.com/c. Spoof will automatically create a unique Session and redirect you to your dedicated console URL (e.g., https://spoof.3sln.com/c/<session-id>).
Once your console is open, you can connect any device with a modern browser to your session.
https://spoof.3sln.com/s/<session-id>) on the target device (e.g., a prop laptop or phone).The core power of Spoof is its ability to control screens in real-time.
For quick testing or standalone use, we provide the Demo Runner.
iframe or for running simple graphics that don't require remote orchestration.If you are a designer or developer looking to build screens for Spoof, check out the Developer Guide.