Skip to content

Shaders: Add details on Implicit Animated #504

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pinkeshmars wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Shaders: Add details on Implicit Animated #504

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df44c05
Shaders: Add details on Implicit Animated
pinkeshmars Apr 14, 2026
26c7a74
Merge branch 'main' into update/shaders-implicit-animation
pinkeshmars Apr 21, 2026
e20865f
Merge branch 'main' into update/shaders-implicit-animation
pinkeshmars Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions docs/ff-concepts/animations/shaders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,68 @@ Time Animation Behavior controls how a shader animates over time. It defines whe

The shader animates automatically in a smooth, endless loop with no setup required. This is ideal for ambient effects like animated backgrounds, gradients, or subtle motion that should always be running.

:::tip

You can have the **Time Animation Behavior** set to **Continuous** while the widget is [**Implicit Animated**](#implicit-animated). This allows the animation to run continuously while still enabling you to control specific parameters when needed.

<div style={{
Copy link
Copy Markdown
Collaborator

@PoojaB26 PoojaB26 Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe use a gif for this? the arcade embed doesnt look too good

Copy link
Copy Markdown
Collaborator Author

@pinkeshmars pinkeshmars Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, made it look like GIF - just as the first image on this doc.

position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/SghJGpZwuglC7HPwfhUz?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

:::

### Implicit

You control the shader’s animation manually using a **Time** slider [0–10]. This is useful when you want to connect the animation to app state or user interaction, such as syncing it with scroll position, triggering it through actions, or freezing the effect at a specific point in time.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/0DRRv5qFpgdbFHyz989C?embed&show_copy_link=true"
Copy link
Copy Markdown
Collaborator

@PoojaB26 PoojaB26 Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should not be a continuous arcade slide, needs to break it down into the clicks, was confused for a while what did you actually click on.

Copy link
Copy Markdown
Collaborator Author

@pinkeshmars pinkeshmars Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! There was actually an issue with the Arcade. It wasn’t showing the cursor, which made it unclear where the click happened. Anyway, I changed it to click-based.

title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Explicit

Provides full control over the animation timeline. You can define how the animation plays by configuring properties like duration, delay, easing curve, looping, and direction. This mode is useful for choreographed animations that need to start, stop, or respond to events using a **Shader Animation** action.
Expand Down
Loading