62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T5f0,

What you can customize:

2–6 colors blended across the flow field, in any order
Speed, warp (liquid distortion strength), and scale of the pattern
Band Steps: smooth gradient or posterized graphic bands
Grain amount for texture
Trigger mode: Ambient, Cursor Reactive, or Scroll Reactive
Cursor strength and scroll hue range (shown contextually per trigger mode)
Render quality (Auto/High/Balanced/Low) for performance control
Animate on/off toggle, with automatic reduced-motion support
Opacity, for use as a full background or a subtle overlay

Use it for:

Product or SaaS landing page heroes that want motion without a video file
Portfolio/agency footers or sections where hue shifts as the visitor scrolls
Subtle textured backgrounds behind cards, panels, or modals at low opacity

Additional details

Trigger modes — Ambient, Cursor Reactive, or Scroll Reactive
Color ramp — 2 to 6 designer-picked colors, fully reorderable
Finish control — smooth gradient or posterized graphic bands (0–12 steps)
Performance — four render-quality tiers plus automatic off-screen pausing
Accessibility — automatic static frame when a visitor prefers reduced motion

64:T5ed,

Customizations available in Framer

Pattern — choose Bayer 2×2, 4×4, 8×8, animated Film Grain/Noise, or Halftone Dots.
Color Mode — Duotone (2 colors) or Tritone (3 colors, quantized with dithered banding).
Color 1 / Color 2 / Color 3 — full Framer color pickers; Color 3 only appears in Tritone mode.
Field Angle — rotates the underlying gradient direction (0–360°).
Density — pattern cell size in pixels; lower is finer, higher is chunkier.
Contrast — sharpness of the transition between tones.
Ambient Motion — baseline animation strength; set to 0 for a fully still pattern.
Trigger — None (ambient only), Hover, or Scroll into view.
Trigger Boost — extra motion strength added when the trigger fires (hidden when Trigger is None).
Opacity — blend strength, so it can act as a subtle overlay rather than an opaque background.
Blend Mode — Normal, Multiply, Screen, Overlay, or Difference, applied as a CSS blend against whatever sits behind it.
Reduce Motion — forces a still frame, for accessibility or a calmer brand feel, independent of the automatic canvas/export static fallback.

65:T78c,

Customizations available in Framer

Pattern — switch the mirrored source between Gradient Bloom, Noise Field, or an uploaded Image Texture.
Texture — the image to mirror, shown only when Pattern is set to Image Texture.
Colors — 2 to 5 colors that drive the Gradient and Noise patterns, and the static-export fallback.
Background — the color the pattern fades into at its outer edge.
Mirror Segments — how many mirrored wedges make up the kaleidoscope (2–24).
Zoom — scales the pattern in or out.
Distortion — amount of organic noise warp applied on top of the mirrored geometry.
Rotation Speed — how fast the mirrored pattern spins (negative values reverse direction).
Animation Speed — speed of the internal color/noise motion, independent of rotation.
Interaction — what drives the effect beyond ambient motion: Ambient, Cursor, Scroll, or Click Pulse.
Interaction Intensity — how strongly the chosen interaction affects rotation, zoom, and distortion.
Performance — Auto / High / Balanced / Low render-resolution cap for pages running multiple effects at once.
Reduced Motion — automatically holds a still frame for visitors who prefer reduced motion.
Freeze Frame — a manual on/off toggle to pause the animation on a single frame.
Opacity — blends the whole effect into the page behind it.
Corner Radius — rounds the component so it drops into card-shaped layouts.

66:T8ed,

PrismDrift is a WebGL/GLSL shader component that turns any image into a reactive, chromatic-aberration surface. It runs an animated simplex-noise field under the hood to ripple the image's red, green, and blue channels apart along a chosen direction, creating the kind of "digital liquid" / prism-split look you'd normally need a custom shader build to get. Drop it over a hero image, a portfolio thumbnail, or a product shot and it sits still until triggered — then drifts, glitches subtly, and settles back.

Customizations available in Framer

Image — the source image the effect distorts; leave empty to use the animated fallback gradient instead.
Trigger — Hover, Scroll into view, Always animate, or Click to toggle; picks what starts the distortion.
Intensity — overall strength of the noise-driven displacement (0–1).
Speed — playback speed of the underlying noise animation.
Noise Scale — spatial frequency of the ripple pattern, from broad waves to fine turbulence.
RGB Split — how far apart the red/green/blue channels shift, i.e. how strong the chromatic-aberration look is.
Direction — the angle (0–360°) the displacement and channel split travel along.
Transition — how quickly the effect eases in and out when the trigger fires.
Fallback Color A / Fallback Color B — the two colors blended into the animated gradient shown when no image is set.
Tint Color — an optional color mixed over the whole effect (any color, including a transparent one to disable it).
Tint Opacity — strength of the tint mix.
Vignette — toggles a soft dark edge falloff for extra depth.
Border Radius — rounds the component's corners.
Respect Reduced Motion — when on (default), visitors with reduced-motion enabled see a static version instead of the animated shader.

67:T81d,

LiquidLens is a WebGL shader component that turns any image — or, with no image at all, a generated two-color gradient — into an interactive liquid-glass surface. A ripple distortion moves across the content with chromatic aberration and animated film grain layered on top, driven by whichever trigger fits the layout: cursor hover, a click pulse, scroll velocity, or a self-animating ambient drift.

It solves the "every shader background looks the same" problem by working with real content instead of only decorative backdrops: drop it over a hero photo, a portfolio thumbnail, or a product shot and it behaves like a lens on that image, not a fixed animation loop sitting behind it. With no image supplied it still looks intentional out of the box, thanks to the built-in gradient fallback.

Customizations available in Framer

Image — the photo or artwork the effect distorts. Optional; leave empty to use the gradient colors instead.
Gradient Start / Gradient End — the two colors used to build the default animated background when no image is set.
Trigger — what drives the ripple: Hover, Click Pulse, Scroll Reactive, or Ambient (auto).
Intensity — overall strength of the liquid distortion.
Ripple Density — how many ripple rings appear across the surface.
Speed — animation speed of the ripple wave.
Color Fringe — amount of chromatic (RGB) aberration at the ripple edges.
Grain — amount of animated film grain layered over the effect.
Overlay Tint — an optional color wash; the color's own alpha sets the opacity.
Corner Radius — rounds the component's corners.
Enable Effect — toggles the shader off in favor of a plain static image/gradient.

68:T88d,

About

AuroraFlowShader is a WebGL flow-field gradient background. Instead of a static gradient or a locked-in noise texture, it blends 2-4 of your own colors through a domain-warped noise field, so the result reads as an organic, slowly drifting aurora rather than a stock "shader background." It's built to sit behind hero sections, full-bleed banners, or individual cards.

The problem it solves: most shader/gradient marketplace components ship with one fixed palette and one fixed motion style, so using one means either accepting someone else's brand colors or editing code. AuroraFlowShader exposes its entire look — palette, motion, direction, grain, and how it reacts to the visitor — as Framer property controls, so it can be restyled per-project with no code changes, and it still looks intentional with zero configuration.

Customizations available in Framer

Colors — array of 2 to 4 color stops the flow field blends between; accepts any Framer color format.
Trigger — Ambient (continuous drift), Cursor Reactive (warps toward the pointer), or Scroll Reactive (intensifies as the component scrolls through view).
Interaction Strength — how strongly the cursor or scroll position warps the field (only shown for Cursor/Scroll trigger modes).
Speed — animation speed of the flow field.
Scale — zoom level of the underlying noise pattern (lower = larger, softer blobs).
Distortion — amount of domain warping, for a more liquid vs. more gradient-like look.
Flow Angle — direction in degrees the gradient flows, also used for the static-fallback CSS gradient.
Grain — strength of an animated film-grain overlay (0 disables it).
Opacity — overall component opacity, for layering under content.
Border Radius — corner rounding, for use as a card background rather than a full-bleed one.

69:T7e2,

Description

GrainField is a live WebGL shader overlay that adds grain, static, halftone dot, or ordered-dither texture to any layer in Framer. Instead of shipping one locked visual (as most single-purpose grain or dither components on the marketplace do), it packs four distinct noise algorithms behind one set of controls, so a designer can move from a subtle film-grain wash over a hero photo to a loud retro dither over a dark section without buying or wiring up a second component.

Drop it above (or below) any content as a transparent, full-bleed layer. Every visual trait — pattern, grain size, intensity, contrast, tint, animation speed, and blend mode — is exposed as a property control, and it degrades gracefully to a CSS/SVG texture in the canvas editor and static exports so it never blocks Framer's automated static-renderer check.

Customizations available in Framer

Pattern — switches the underlying algorithm between Film Grain, Fine Static, Halftone Dot, and Bayer Dither.
Grain Size — pixel size of each grain/dot cell, from fine to chunky.
Intensity — overall strength/opacity of the effect.
Contrast — pushes the noise distribution toward soft or punchy.
Tint Color — any color (including alpha) to tint the texture; alpha also scales intensity.
Color Mode — Mono (one noise value per pixel) or Chromatic (independent noise per RGB channel, for subtle color fringing).
Animate — toggles the flicker on or off; off renders one static frame.
Speed — how fast the pattern flickers, only shown while Animate is on.
Blend Mode — Normal, Multiply, Screen, Overlay, Soft Light, Difference, or Color Dodge, for compositing against whatever sits behind it.

6a:T8e4,

Customizations available in Framer

Content & color

Colors — up to five gradient stops, each with its own colour and position. This is the surface the glass refracts.
Angle — direction the colour ramp travels across the frame, 0–360°.
Image — optional. When set, the glass refracts this image instead of the gradient, which makes it CMS-friendly for hero art.

Liquid motion

Distortion — how hard the glass bends what sits behind it.
Scale — size of the flowing cells; low is broad and calm, high is fine and busy.
Speed — ambient flow speed. Set to 0 for a frozen pane.

Glass character

Dispersion — prismatic red/blue split at the edges of the bend.
Sheen — specular light catching the folds.
Edge Refraction — extra bending near the frame edges, mimicking a thicker glass rim.
Grain — fine film grain, which also helps against gradient banding.

Interaction

Trigger — Ambient only, Cursor only, or both.
Cursor Size — radius of the lens under the pointer, relative to the frame.
Cursor Strength — how strongly the pointer pulls and lights the glass.
Click Ripples — sends a ring of light outward on click or tap.

Layout

Radius — corner rounding; 0 for a full-bleed section background.

Performance & accessibility

Quality — internal render resolution (High / Balanced / Low). Layout size is unaffected.
Pause Offscreen — stops rendering while scrolled out of view.
Reduced Motion — shows a still frame to visitors with reduced motion enabled in their OS.

6b:T8f4,

Description

Prism Glitch Shader is a WebGL fragment-shader effect that splits an image (or a generated two-color gradient, if no image is used) into shifting chromatic-aberration and displacement bands — the "RGB split glitch" look, done as a real-time shader instead of a static overlay. It solves a common problem with existing glitch/distortion components: most are locked to one trigger and one visual, so designers either avoid them or end up faking the look with layered PNGs.

This one is built to be dropped over a hero image, product shot, or gallery thumbnail on almost any site. It can be revealed on hover, on scroll into view, by following the visitor's cursor, or run as a constant ambient loop — and works with just two colors if no image is supplied at all, so it also doubles as an animated gradient background.

Customizations available in Framer

Image — optional photo to apply the effect to; leave empty to use the color gradient instead.
Color From / Color To — the two colors used to build the animated gradient when no image is set (and as the static-fallback background).
Trigger — Hover, Scroll Into View, Follow Cursor, or Always On; controls what drives the effect.
Intensity — overall strength of the distortion.
RGB Split — amount of chromatic aberration (red/green/blue channel offset).
Noise Scale — size of the underlying wave/noise pattern (broad bands vs. fine detail).
Speed — animation speed of the noise field.
Grain — amount of film-grain noise layered on top.
Tint Color — optional color wash mixed into the effect; transparent by default (off).
Tint Opacity — strength of the tint wash.
Corner Radius — rounds the component's corners.
Reduce Motion — when on (default), visitors with "reduce motion" enabled see the static image/gradient instead of the animated shader.

6c:T8c6,

Description

Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site. Most shader backgrounds on the Framer marketplace are locked to one look and one placement — a hero, a full-page fill. This one is built as a general-purpose texture layer: drop it on a card, a footer, a full section, or the whole page, and it adapts to whatever sits beneath it because it can render as a transparent overlay or an opaque background.

It solves the "every shader site looks the same" problem by giving four distinct dithering algorithms (Bayer ordered dither, fine noise grain, blue-noise-style grain, and halftone dots), each with independently tunable density, animation speed, distortion, and color, so two sites using this component rarely look alike.

Customizations available in Framer

Pattern — switches between Bayer Dither, Noise Grain, Blue Noise, and Halftone Dots algorithms.
Layer Mode — Overlay (transparent, stacks on top of other layers) or Background (opaque fill).
Intensity — overall strength/density of the dither or grain.
Scale — size of the pattern cells, from fine grain to chunky dots.
Speed — animation speed; 0 fully freezes the effect and stops the render loop.
Distortion — amount of animated warp applied to the pattern field.
Color Mode — Monochrome or Duotone.
Color A — primary color, and the static-render fallback fill.
Color B — secondary color for Duotone blending and the fallback gradient (hidden unless Duotone is selected).
Opacity — overall layer opacity.
Blend Mode — CSS blend mode (normal, multiply, screen, overlay, soft-light, difference) against whatever sits beneath it.
Pause Offscreen — stops rendering when scrolled out of view, for performance.

6d:T845,

Description

ShaderShift is a WebGL shader wrapper for any image: instead of shipping one locked-in visual, it bundles five real fragment-shader effects — Bayer-ordered Dithering, luminance-driven Halftone, Pixelation, animated film Grain, and a Liquid Warp distortion — behind a single "Effect" dropdown, so one component can cover a whole site's worth of image treatments.

It also ships three trigger modes: Ambient (loops continuously), Hover (ramps the effect in on pointer-over and eases it back out), and Scroll Reveal (starts fully stylized and dissolves into the plain photo once the frame scrolls into view). That combination is what makes it a building block rather than a one-off demo — a designer can drop it into a hero image, a portfolio grid, or an editorial photo essay and get a different result each time just by changing dropdowns and colors, with no code edits.

Customizations available in Framer

Image — the source photo (any Framer image, including CMS-bound fields).
Effect — Dithering, Halftone, Pixelation, Grain, or Liquid Warp.
Trigger — Ambient (continuous loop), On Hover, or On Scroll Into View.
Intensity — how strongly the effect is mixed over the source image (0–1).
Pattern Scale — dot/pixel/grid density for Dithering, Halftone, and Pixelation; wave frequency for Liquid Warp.
Speed — animation speed for Grain and Liquid Warp; 0 freezes on a still frame. Automatically disabled for visitors with reduced-motion enabled.
Grayscale Base — converts the source image to luminance before applying the duotone colors (Dithering/Halftone).
Color A / Color B — the duotone palette used by Dithering and Halftone.
Reveal Duration — seconds the Scroll Reveal fade takes (only shown when Trigger is set to On Scroll Into View).

6e:T7c7,

FlowCurrent is a WebGL shader background that renders a soft, continuously flowing color field, like dye drifting through water. Flip one Trigger control and it changes behavior entirely: let it drift on its own, bend it toward your cursor, or tie it to scroll speed. It's built to work as a hero background, a section divider, a card background, or a low-opacity overlay on top of other content, not just a one-off hero visual.

Customize in Framer:

3 color stops for the gradient — any brand palette
Pattern Scale, Speed, and Warp Strength to shape how the flow looks
Trigger: Ambient Drift, Cursor Reactive, or Scroll Reactive
Reactivity to control how strongly cursor/scroll movement pushes the flow
Grain for subtle texture and banding reduction
Opacity and Blend Mode (Normal, Screen, Multiply, Overlay, Soft Light) to layer it over other content
Freeze toggle for a still frame instead of animating

Use it for:

A hero section background that matches your brand colors out of the box
A section divider or full-bleed atmosphere layer between static content blocks
A faint Screen-blended overlay on top of a product shot or photo grid

Additional details

Trigger modes — Ambient, Cursor, or Scroll reactive, switchable with one control
Color controls — 3 gradient stops, works with any brand palette
Blend mode — Normal, Screen, Multiply, Overlay, or Soft Light, so it can sit on top of other content
Graceful fallback — static CSS gradient in the canvas editor, static exports, and browsers without WebGL
Performance-aware — pauses its render loop when scrolled off-screen

6f:T8e3,

Customizations available in Framer

Source — switch between a built-in animated gradient and your own image as the input the halftone reads luminance from.
Image — the image to run the effect over (only shown when Source is set to Image).
Ink (dark) — dot color used for the darkest areas of the source.
Ink (light) — dot color used for lighter areas; blended with Ink (dark) across the luminance range.
Background — the color behind the dots.
Shape — dot grid mark: Circle, Square, or Line screen.
Density — grid cell size in pixels; lower values pack the dots tighter.
Angle — rotation of the dot grid, in degrees.
Contrast — pushes source luminance toward pure black/white before it drives dot size, for punchier or softer results.
Animate — toggles the gentle time-based drift on or off (also automatically respects the visitor's OS-level reduced-motion setting).
Speed — playback speed of the animation (shown only when Animate is on).
Wave amount — how much the source and grid ripple/drift over time (shown only when Animate is on).
Mouse reactive — toggles a soft cursor-follow highlight in the pattern.
Mouse strength — intensity of the cursor highlight (shown only when Mouse reactive is on).

Use cases

A portfolio or agency site hero section that turns a plain brand-color gradient into a textured, print-inspired backdrop instead of a flat fill.
A photography or editorial site that runs a hero or case-study image through the effect for a stylized, art-directed treatment rather than showing the raw photo.
A product landing page section background that stays subtly alive (slow drift, cursor reaction) without competing with foreground text, using low Density/Wave/Contrast settings for a quiet effect.

70:T83b,

Customizations available

Image — optional source photo/graphic. Leave empty to use the built-in animated gradient instead.
Overlay — optional layer (headline, logo, button) rendered centered on top of the canvas.
Trigger — Hover, Always on, Scroll into view, or Click to toggle; swaps the interaction pattern entirely.
Split Amount — max RGB channel offset in pixels at full effect.
Angle — direction the channels split apart, in degrees.
Noise / Grain — amount of organic jitter in the split plus a fine film-grain overlay.
Speed — playback speed of the shader's internal animation.
Ease — how quickly the effect ramps in and out when the trigger changes.
Grayscale Base — desaturates the source before splitting, for a more graphic look.
Idle Drift + Idle Amount — subtle always-on wobble so the effect never looks frozen at rest, independent of the chosen trigger.
Gradient 1 / 2 / 3 — the three colors used for the procedural background whenever no Image is set.
Radius — corner rounding, to match the surrounding layout.
Motion — Auto (respects the visitor's OS reduced-motion setting), Always Animate, or Always Static, so accessibility is a control rather than an afterthought.

Use cases

A chromatic-glitch hover state on project thumbnails in a design portfolio.
An animated gradient hero background behind a headline on a product landing page, intensifying as the visitor scrolls it into view.
A click-to-toggle "glitch reveal" on a case-study cover image, or a subtle always-on shimmer on a brand mark for an editorial, motion-forward feel.

71:T531,

A radial capability and feature selector with drag, wheel, click, and keyboard navigation—designed for studios, portfolios, and product websites.

Customizations

Items: Up to eight titles, categories, descriptions, metrics, accent colors and links
Interaction: Drag, wheel, click, arrow keys, Home, End and Page Up/Down
Dial: Starting angle, ring width, node size, ticks, coordinates and glow
Motion: Duration, easing, animation toggle and initial selection
Static rendering: Independently configurable Canvas/export item
Colors: Background, central panel, foreground, muted text, rules and controls
Layout: Padding, radius, dial scale, column gap and mobile breakpoint
Typography: Independent display, body and metadata fonts
Links: Per-item destinations and optional new-tab behavior
Accessibility: Semantic tablist/tabpanel structure, focus management and live updates
Performance: Event-driven rendering with zero animation frames while idle

72:T461,

Customizations

Content: Headline, eyebrow, summary, action, index and side note
Curtain: 3–10 bands, angle, overlap, alternating direction, numbers and texture
Motion: Once or loop playback, duration, stagger, delay, hold, easing and replay
Static rendering: Adjustable Canvas/export transition frame
Media: Responsive image, cover/contain fitting, zoom, overlay and procedural fallback
Colors: Surface, typography, muted text, accent, two curtain colors and rules
Layout: Padding, radius, media proportion, gap and mobile breakpoint
Typography: Independent display, body and metadata fonts
Accessibility: Labeled region, keyboard-accessible replay and reduced-motion handling
Performance: Visibility-aware timers, offscreen transition cancellation and no continuous animation loop

73:T441,

Customizations

Media: Optional responsive image with cover or contain fitting
Refraction: Distortion, frequency, refraction strength, chromatic separation, pointer radius and influence
Motion: Speed, pointer following, 30/60 FPS and configurable static frame
Performance: Eco, balanced and high rendering quality; viewport and tab visibility tracking
Texture: Procedural grain, vignette and color overlay
Colors: Background, three field colors, foreground, accent and framing lines
Layout: Padding, radius and responsive compact breakpoint
Content: Eyebrow, display title, status label and index
Typography: Independent display and metadata font controls
Accessibility: Decorative or labeled-image modes, keyboard focus and directional controls

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6-all:/unified/creator/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/activity/":[{"data":[{"id":"01a0bce8-3488-7196-82ba-c382554777c1","type":"creator.followed","target":{"type":"creator","id":"41cc1626-146a-44b9-a86a-42bacafc1d6e","preview":"Eduardo Amaral","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/41cc1626-146a-44b9-a86a-42bacafc1d6e/9gcqpfz0","slug":"eduardo-amaral","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:09.539Z","latestAt":"2026-09-20T03:42:09.539Z"},{"id":"01a0bce8-32f8-739c-bb43-3fda60abafc1","type":"creator.followed","target":{"type":"creator","id":"7850f4f6-d0b8-4424-a09c-a4fc33e0a9a6","preview":"Padmavathi VL","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7850f4f6-d0b8-4424-a09c-a4fc33e0a9a6/ded2mt3a","slug":"heypadma","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:09.140Z","latestAt":"2026-09-20T03:42:09.140Z"},{"id":"01a0bce8-295f-724a-aa9b-4645f2a39ae7","type":"creator.followed","target":{"type":"creator","id":"461f5c94-ff09-48ed-bd17-0f768b2e38e2","preview":"FSD3","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/141515/avatar-2ZYhuOSIeeTwYm9dmAIAsjpAJfxdXO.jpg","slug":"fsd3","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:06.683Z","latestAt":"2026-09-20T03:42:06.683Z"},{"id":"01a0bce8-278b-755f-a377-b4ee780d4f83","type":"creator.followed","target":{"type":"creator","id":"72d8eb19-eaa6-4c9c-824a-f9ce9be1aa3a","preview":"Igor Reif","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/153946/avatar-y2jxLO7nLCb1ORJIPZPF38kh3P7WP4.jpg","slug":"igor-reif","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:06.214Z","latestAt":"2026-09-20T03:42:06.214Z"},{"id":"01a0bce8-1ba5-7619-a3b6-883f99e60901","type":"creator.followed","target":{"type":"creator","id":"e1af7305-3d64-4054-8d78-41972a97341c","preview":"Zoe P.","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e1af7305-3d64-4054-8d78-41972a97341c/46zap623","slug":"zoe-p","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:03.157Z","latestAt":"2026-09-20T03:42:03.157Z"},{"id":"01a0bce8-1943-750f-bd91-e92239bf0fd7","type":"creator.followed","target":{"type":"creator","id":"abadb104-db9f-4f34-ae1a-b2f7bdb55e45","preview":"La Jolla Marketing","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1000942/avatar-QzCswvTuhvWagtojVaPMerowB6fc5G.jpg","slug":"la-jolla-marketing","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:02.557Z","latestAt":"2026-09-20T03:42:02.557Z"},{"id":"01a0bce8-10a9-7120-b61e-362e22ab6fd4","type":"creator.followed","target":{"type":"creator","id":"8f482271-e376-484b-adc5-3660e57db185","preview":"Kilogram Agency","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1555596/avatar-a66NtFcfarzDmw7ym5VS6tBgsSatui.jpg","slug":"kilogram-agency","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:42:00.357Z","latestAt":"2026-09-20T03:42:00.357Z"},{"id":"01a0bce8-0565-7239-8156-540a46d70c32","type":"creator.followed","target":{"type":"creator","id":"f7783b6a-41dd-424b-adda-554f03c5184c","preview":"Kotsu Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f7783b6a-41dd-424b-adda-554f03c5184c/uou7is3v","slug":"kotsustudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:57.473Z","latestAt":"2026-09-20T03:41:57.473Z"},{"id":"01a0bce8-0368-760d-adc0-f1e60a2d15c4","type":"creator.followed","target":{"type":"creator","id":"b911b212-540d-418b-b4f4-e72c757ca875","preview":"Joaquin Martinoia","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/181591/Google%20Profile%20Picture-dufHyRfzIa8iZoZg4eLnmQB54Hbj2D.png","slug":"joaquin-martinoia","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:56.965Z","latestAt":"2026-09-20T03:41:56.965Z"},{"id":"01a0bce8-018e-7569-8743-f8acec56a602","type":"creator.followed","target":{"type":"creator","id":"01b1df2e-36ec-440c-93d9-9b478a57b7b9","preview":"Motiondrops","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28949/avatar-IS84692LBjOzNfdGLbfHcR9owfKiJq.jpg","slug":"motiondrops","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:56.490Z","latestAt":"2026-09-20T03:41:56.490Z"},{"id":"01a0bce7-ffc2-765a-801b-d88b6193c28d","type":"creator.followed","target":{"type":"creator","id":"2ea40666-4bd8-4d92-aae7-afb2bf982188","preview":"Martina Gazenova","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/515538/avatar-HIx8i3QYglETly5wF9cV5OXwufFQcs.jpg","slug":"martina-gazenova","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:56.030Z","latestAt":"2026-09-20T03:41:56.030Z"},{"id":"01a0bce7-f58d-71ec-9464-4803ed31a02a","type":"creator.followed","target":{"type":"creator","id":"5ae98f83-f255-4fa6-b420-201e1ff075aa","preview":"Victor Ashasha","previewJson":null,"thumbnail":"https://framerusercontent.com/avatars/users/5ae98f83-f255-4fa6-b420-201e1ff075aa/eWiKi2ZXd","slug":"victor-ashasha","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:53.418Z","latestAt":"2026-09-20T03:41:53.418Z"},{"id":"01a0bce7-f3b8-7371-af11-f6f85f84a54e","type":"creator.followed","target":{"type":"creator","id":"49b52775-4d2d-4c7e-89f4-b9494c6900f4","preview":"olt.corp","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49b52775-4d2d-4c7e-89f4-b9494c6900f4/3gf09ziq","slug":"olt-corp","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:52.946Z","latestAt":"2026-09-20T03:41:52.946Z"},{"id":"01a0bce7-f1e0-7720-875c-ae690dc5e288","type":"creator.followed","target":{"type":"creator","id":"530618d4-39d4-4326-822e-6adc8a89643b","preview":"Renatho","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/530618d4-39d4-4326-822e-6adc8a89643b/1mfjjuaw","slug":"renatho","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:52.473Z","latestAt":"2026-09-20T03:41:52.473Z"},{"id":"01a0bce7-f035-765a-999b-ba7e03eb969b","type":"creator.followed","target":{"type":"creator","id":"c6964e6a-1ffe-42a3-aa80-28f01d78465d","preview":"Cobi Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/579444/avatar-8spxDXcECXp47G6Rnr1EVQIbK2zb8p.jpg","slug":"ohheycobi","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T03:41:52.033Z","latestAt":"2026-09-20T03:41:52.033Z"},{"id":"01a0bce7-107c-75af-a868-5c84603c7b26","type":"component.created","target":{"type":"component","id":"bHax6NMw0PMUfGk1FYd1","preview":"Prism Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a0bce6-dfcc-74da-8a72-05d6936f7c27.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T03:40:54.780Z","latestAt":"2026-09-20T03:40:54.780Z"},{"id":"01a09cc7-3f91-763b-b82f-08b914bda557","type":"creator.followed","target":{"type":"creator","id":"93c71adc-5293-4c78-9bd7-0a762b524aa1","preview":"Asad Ahmed","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93c71adc-5293-4c78-9bd7-0a762b524aa1/pz3ugwgl","slug":"asadahmedx","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T21:58:18.729Z","latestAt":"2026-09-13T21:58:18.729Z"},{"id":"01a09cc7-3daa-730a-85c2-21624821cc48","type":"creator.followed","target":{"type":"creator","id":"84bdf53c-7bf1-456d-a7b3-6c27388aea73","preview":"Give.ee","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/84bdf53c-7bf1-456d-a7b3-6c27388aea73/x10z8xlz","slug":"tanel-sepp","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T21:58:18.276Z","latestAt":"2026-09-13T21:58:18.276Z"},{"id":"01a09cc7-2d69-71ee-9a91-8d692db9d0b8","type":"creator.followed","target":{"type":"creator","id":"cad7a8da-441a-4201-a2f2-3b3b6493cd98","preview":"Mehak Jahangir","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cad7a8da-441a-4201-a2f2-3b3b6493cd98/pcv672ji","slug":"mehak-designs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T21:58:14.106Z","latestAt":"2026-09-13T21:58:14.106Z"},{"id":"01a09cc7-2bcc-72a9-ac14-45c5ea911fd8","type":"creator.followed","target":{"type":"creator","id":"e6e91ace-e525-441a-b059-87551a47abde","preview":"Adeyemo Ademola","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e6e91ace-e525-441a-b059-87551a47abde/hza28yl7","slug":"theade","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","slug":"artem-kireev","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T21:58:13.697Z","latestAt":"2026-09-13T21:58:13.697Z"}],"pagination":{"next":"MjAyNi0wOS0xM1QyMTo1ODoxMy42OTdafDAxYTA5Y2M3LTJiY2MtNzJhOS1hYzE0LTQ1YzVlYTkxMWZkOA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6:/unified/posts/?creator=bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6&with=reposts":[{"data":[{"id":"01a0bce7-0e20-723d-b728-a7ac9e1e27d7","title":null,"body":"

Built a liquid, iridescent shader background for Framer that reacts to your cursor or scroll instead of just looping on a timer, with every color and the band/grain look exposed as controls.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a liquid, iridescent shader background for Framer that reacts to your cursor or scroll instead of just looping on a timer, with every color and the band/grain look exposed as controls."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bHax6NMw0PMUfGk1FYd1","resolved":true,"title":"Prism Flow","body":"$63","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What you can customize:","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"2–6 colors blended across the flow field, in any order"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed, warp (liquid distortion strength), and scale of the pattern"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Band Steps: smooth gradient or posterized graphic bands"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain amount for texture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger mode: Ambient, Cursor Reactive, or Scroll Reactive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor strength and scroll hue range (shown contextually per trigger mode)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Render quality (Auto/High/Balanced/Low) for performance control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animate on/off toggle, with automatic reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity, for use as a full background or a subtle overlay"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use it for:","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product or SaaS landing page heroes that want motion without a video file"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio/agency footers or sections where hue shifts as the visitor scrolls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Subtle textured backgrounds behind cards, panels, or modals at low opacity"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Additional details","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger modes — Ambient, Cursor Reactive, or Scroll Reactive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color ramp — 2 to 6 designer-picked colors, fully reorderable"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Finish control — smooth gradient or posterized graphic bands (0–12 steps)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance — four render-quality tiers plus automatic off-screen pausing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility — automatic static frame when a visitor prefers reduced motion"}]}]}]}]},"introduction":"Liquid color that moves with you","slug":"prism-flow","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a0bce6-dfcc-74da-8a72-05d6936f7c27.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1296,"height":1007}}],"post":null,"createdAt":"2026-09-20T03:40:53.513Z","updatedAt":"2026-09-20T03:40:53.513Z","publishedAt":"2026-09-20T03:40:53.511Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gregarious-group-553370.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/prismflow?wanted=true","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"M7vnyTaaPIdlTS6J2qUc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T03:40:54.176Z","updatedAt":"2026-09-20T03:40:54.176Z"},{"id":"01a09cc6-64b3-748f-b3f9-70859f64e29a","title":null,"body":"

Built a real-time GLSL dither/halftone shader for Framer with five pattern modes, duotone or tritone palettes, and hover/scroll-reactive motion, so it works as a hero background, a brand panel, or a grain overlay instead of one fixed look.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a real-time GLSL dither/halftone shader for Framer with five pattern modes, duotone or tritone palettes, and hover/scroll-reactive motion, so it works as a hero background, a brand panel, or a grain overlay instead of one fixed look."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mkxv5bzInvMWF5bSuuTT","resolved":true,"title":"Dither Ultra","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizations available in Framer"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern","marks":[{"type":"bold"}]},{"type":"text","text":" — choose Bayer 2×2, 4×4, 8×8, animated Film Grain/Noise, or Halftone Dots."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Duotone (2 colors) or Tritone (3 colors, quantized with dithered banding)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color 1 / Color 2 / Color 3","marks":[{"type":"bold"}]},{"type":"text","text":" — full Framer color pickers; Color 3 only appears in Tritone mode."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Field Angle","marks":[{"type":"bold"}]},{"type":"text","text":" — rotates the underlying gradient direction (0–360°)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Density","marks":[{"type":"bold"}]},{"type":"text","text":" — pattern cell size in pixels; lower is finer, higher is chunkier."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contrast","marks":[{"type":"bold"}]},{"type":"text","text":" — sharpness of the transition between tones."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — baseline animation strength; set to 0 for a fully still pattern."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — None (ambient only), Hover, or Scroll into view."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger Boost","marks":[{"type":"bold"}]},{"type":"text","text":" — extra motion strength added when the trigger fires (hidden when Trigger is None)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — blend strength, so it can act as a subtle overlay rather than an opaque background."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blend Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Normal, Multiply, Screen, Overlay, or Difference, applied as a CSS blend against whatever sits behind it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduce Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — forces a still frame, for accessibility or a calmer brand feel, independent of the automatic canvas/export static fallback."}]}]}]}]},"introduction":"Retro dither, any palette","slug":"dither-ultra","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a09cc6-0a38-763b-abdf-5fefd28dc26c.png","metadata":{"tint":{"h":30,"s":70,"l":49},"width":1296,"height":1007}}],"post":null,"createdAt":"2026-09-13T21:57:22.142Z","updatedAt":"2026-09-13T21:57:22.142Z","publishedAt":"2026-09-13T21:57:22.138Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://straightforward-copy-932317.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/dither-ultra?wanted=true","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"bD3IakX0rNMUKXim62P4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-13T21:57:22.739Z","updatedAt":"2026-09-13T21:57:22.739Z"},{"id":"01a08838-cc68-757c-a9b0-366132568b77","title":null,"body":"

Built a kaleidoscope shader that mirrors your own colors, noise, or image instead of a fixed pattern, with cursor, scroll, and click-reactive modes.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a kaleidoscope shader that mirrors your own colors, noise, or image instead of a fixed pattern, with cursor, scroll, and click-reactive modes."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ejJ6s0sQykLXlOjaKK2N","resolved":true,"title":"Kaleidoscope Shader","body":"$65","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern","marks":[{"type":"bold"}]},{"type":"text","text":" — switch the mirrored source between Gradient Bloom, Noise Field, or an uploaded Image Texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Texture","marks":[{"type":"bold"}]},{"type":"text","text":" — the image to mirror, shown only when Pattern is set to Image Texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors","marks":[{"type":"bold"}]},{"type":"text","text":" — 2 to 5 colors that drive the Gradient and Noise patterns, and the static-export fallback."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background","marks":[{"type":"bold"}]},{"type":"text","text":" — the color the pattern fades into at its outer edge."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mirror Segments","marks":[{"type":"bold"}]},{"type":"text","text":" — how many mirrored wedges make up the kaleidoscope (2–24)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zoom","marks":[{"type":"bold"}]},{"type":"text","text":" — scales the pattern in or out."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distortion","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of organic noise warp applied on top of the mirrored geometry."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotation Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — how fast the mirrored pattern spins (negative values reverse direction)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — speed of the internal color/noise motion, independent of rotation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction","marks":[{"type":"bold"}]},{"type":"text","text":" — what drives the effect beyond ambient motion: Ambient, Cursor, Scroll, or Click Pulse."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — how strongly the chosen interaction affects rotation, zoom, and distortion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance","marks":[{"type":"bold"}]},{"type":"text","text":" — Auto / High / Balanced / Low render-resolution cap for pages running multiple effects at once."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — automatically holds a still frame for visitors who prefer reduced motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Freeze Frame","marks":[{"type":"bold"}]},{"type":"text","text":" — a manual on/off toggle to pause the animation on a single frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — blends the whole effect into the page behind it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — rounds the component so it drops into card-shaped layouts."}]}]}]}]},"introduction":"One shader, infinite reflections","slug":"kaleidoscope-shader","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a08838-8149-77f5-aa18-62cacf1966cd.png","metadata":{"tint":{"h":32,"s":94,"l":25},"width":864,"height":671}}],"post":null,"createdAt":"2026-09-09T22:10:18.258Z","updatedAt":"2026-09-09T22:10:18.258Z","publishedAt":"2026-09-09T22:10:18.255Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://delicious-portion-574193.framer.app/","price":"6","paymentUrl":"https://kireevtimothy.gumroad.com/l/ljvgp?wanted=true","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"mzbdViI76yvlypt8b2YJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-09T22:10:18.857Z","updatedAt":"2026-09-09T22:10:18.857Z"},{"id":"01a069be-8bd8-711d-8865-3930bb466221","title":null,"body":"

Built a shader that turns hover on any image into a chromatic ripple instead of a flat crossfade, with the trigger, direction, and split amount all exposed as controls so it never looks locked to one look.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a shader that turns hover on any image into a chromatic ripple instead of a flat crossfade, with the trigger, direction, and split amount all exposed as controls so it never looks locked to one look."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"38NTr1FW0saWq3nd9Epu","resolved":true,"title":"Prism Drift 2.0","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"PrismDrift is a WebGL/GLSL shader component that turns any image into a reactive, chromatic-aberration surface. It runs an animated simplex-noise field under the hood to ripple the image's red, green, and blue channels apart along a chosen direction, creating the kind of \"digital liquid\" / prism-split look you'd normally need a custom shader build to get. Drop it over a hero image, a portfolio thumbnail, or a product shot and it sits still until triggered — then drifts, glitches subtly, and settles back."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — the source image the effect distorts; leave empty to use the animated fallback gradient instead."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Hover, Scroll into view, Always animate, or Click to toggle; picks what starts the distortion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall strength of the noise-driven displacement (0–1)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — playback speed of the underlying noise animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Noise Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — spatial frequency of the ripple pattern, from broad waves to fine turbulence."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"RGB Split","marks":[{"type":"bold"}]},{"type":"text","text":" — how far apart the red/green/blue channels shift, i.e. how strong the chromatic-aberration look is."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Direction","marks":[{"type":"bold"}]},{"type":"text","text":" — the angle (0–360°) the displacement and channel split travel along."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transition","marks":[{"type":"bold"}]},{"type":"text","text":" — how quickly the effect eases in and out when the trigger fires."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fallback Color A / Fallback Color B","marks":[{"type":"bold"}]},{"type":"text","text":" — the two colors blended into the animated gradient shown when no image is set."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint Color","marks":[{"type":"bold"}]},{"type":"text","text":" — an optional color mixed over the whole effect (any color, including a transparent one to disable it)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — strength of the tint mix."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vignette","marks":[{"type":"bold"}]},{"type":"text","text":" — toggles a soft dark edge falloff for extra depth."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — rounds the component's corners."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respect Reduced Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — when on (default), visitors with reduced-motion enabled see a static version instead of the animated shader."}]}]}]}]},"introduction":"Turn any image into living light","slug":"prism-drift-2-0","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a069bd-bfa8-77e4-bb2c-76b7278e1bd8.png","metadata":{"tint":{"h":40,"s":50,"l":19},"width":864,"height":671}}],"post":null,"createdAt":"2026-09-04T00:08:09.857Z","updatedAt":"2026-09-04T00:08:09.857Z","publishedAt":"2026-09-04T00:08:09.853Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://breezy-melon-159336.framer.app/","price":"6","paymentUrl":"https://kireevtimothy.gumroad.com/l/ctbjm?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"wxUYzjI3xNPtWCJVnEx1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T00:08:10.456Z","updatedAt":"2026-09-04T00:08:10.456Z"},{"id":"01a064ad-8df0-7415-b325-425b5347d2ea","title":null,"body":"

Built a shader lens that ripples, splits color, and grains any image you drop into it, or just runs on a gradient if you don't have one handy.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a shader lens that ripples, splits color, and grains any image you drop into it, or just runs on a gradient if you don't have one handy."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"acciWpwUiMQE3FNI0DW4","resolved":true,"title":"Liquid Lens","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"LiquidLens is a WebGL shader component that turns any image — or, with no image at all, a generated two-color gradient — into an interactive liquid-glass surface. A ripple distortion moves across the content with chromatic aberration and animated film grain layered on top, driven by whichever trigger fits the layout: cursor hover, a click pulse, scroll velocity, or a self-animating ambient drift."}]},{"type":"paragraph","content":[{"type":"text","text":"It solves the \"every shader background looks the same\" problem by working with real content instead of only decorative backdrops: drop it over a hero photo, a portfolio thumbnail, or a product shot and it behaves like a lens on that image, not a fixed animation loop sitting behind it. With no image supplied it still looks intentional out of the box, thanks to the built-in gradient fallback."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — the photo or artwork the effect distorts. Optional; leave empty to use the gradient colors instead."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient Start / Gradient End","marks":[{"type":"bold"}]},{"type":"text","text":" — the two colors used to build the default animated background when no image is set."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — what drives the ripple: Hover, Click Pulse, Scroll Reactive, or Ambient (auto)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall strength of the liquid distortion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ripple Density","marks":[{"type":"bold"}]},{"type":"text","text":" — how many ripple rings appear across the surface."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — animation speed of the ripple wave."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color Fringe","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of chromatic (RGB) aberration at the ripple edges."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of animated film grain layered over the effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overlay Tint","marks":[{"type":"bold"}]},{"type":"text","text":" — an optional color wash; the color's own alpha sets the opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — rounds the component's corners."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enable Effect","marks":[{"type":"bold"}]},{"type":"text","text":" — toggles the shader off in favor of a plain static image/gradient."}]}]}]}]},"introduction":"A liquid lens for any image","slug":"liquid-lens","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a064ad-4ea5-7578-a1c1-40f9cce6a552.png","metadata":{"tint":{"h":90,"s":29,"l":22},"width":864,"height":671}}],"post":null,"createdAt":"2026-09-03T00:31:30.225Z","updatedAt":"2026-09-03T00:31:30.225Z","publishedAt":"2026-09-03T00:31:30.222Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://energetic-lots-697674.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/liquidlens?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"u1FaLllagIKAs1aXjQJb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T00:31:30.800Z","updatedAt":"2026-09-03T00:31:30.800Z"},{"id":"01a05a8b-3cf9-761d-9407-7b5a508b4cc8","title":null,"body":"

Built a shader background that actually blends your own colors through a live flow field instead of shipping one fixed palette, with ambient, cursor-reactive, and scroll-reactive modes built in.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a shader background that actually blends your own colors through a live flow field instead of shipping one fixed palette, with ambient, cursor-reactive, and scroll-reactive modes built in."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xOF4VWl9BQBInZ2YYQfK","resolved":true,"title":"Aurora Flow Shader","body":"$68","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"AuroraFlowShader is a WebGL flow-field gradient background. Instead of a static gradient or a locked-in noise texture, it blends 2-4 of your own colors through a domain-warped noise field, so the result reads as an organic, slowly drifting aurora rather than a stock \"shader background.\" It's built to sit behind hero sections, full-bleed banners, or individual cards."}]},{"type":"paragraph","content":[{"type":"text","text":"The problem it solves: most shader/gradient marketplace components ship with one fixed palette and one fixed motion style, so using one means either accepting someone else's brand colors or editing code. AuroraFlowShader exposes its entire look — palette, motion, direction, grain, and how it reacts to the visitor — as Framer property controls, so it can be restyled per-project with no code changes, and it still looks intentional with zero configuration."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors","marks":[{"type":"bold"}]},{"type":"text","text":" — array of 2 to 4 color stops the flow field blends between; accepts any Framer color format."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Ambient (continuous drift), Cursor Reactive (warps toward the pointer), or Scroll Reactive (intensifies as the component scrolls through view)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction Strength","marks":[{"type":"bold"}]},{"type":"text","text":" — how strongly the cursor or scroll position warps the field (only shown for Cursor/Scroll trigger modes)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — animation speed of the flow field."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — zoom level of the underlying noise pattern (lower = larger, softer blobs)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distortion","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of domain warping, for a more liquid vs. more gradient-like look."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flow Angle","marks":[{"type":"bold"}]},{"type":"text","text":" — direction in degrees the gradient flows, also used for the static-fallback CSS gradient."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain","marks":[{"type":"bold"}]},{"type":"text","text":" — strength of an animated film-grain overlay (0 disables it)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall component opacity, for layering under content."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — corner rounding, for use as a card background rather than a full-bleed one."}]}]}]}]},"introduction":"Gradients that flow with you","slug":"aurora-flow-shader","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a05a8b-1962-7572-8978-ec179dc03787.png","metadata":{"tint":{"h":330,"s":78,"l":30},"width":864,"height":671}}],"post":null,"createdAt":"2026-09-01T01:17:49.114Z","updatedAt":"2026-09-01T01:17:49.114Z","publishedAt":"2026-09-01T01:17:49.111Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://centered-salmon-420661.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/AuroraFlowShader?wanted=true","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"ZjZzNX4oOVoHJvojuJd5","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-01T01:17:49.689Z","updatedAt":"2026-09-01T01:17:49.689Z"},{"id":"01a02754-62f4-75a9-a5e2-8871ceded34e","title":null,"body":"

Built a single grain/dither shader that swaps between four noise styles instead of locking you into one look, so you don't need four separate components for grain, static, halftone, and dither.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a single grain/dither shader that swaps between four noise styles instead of locking you into one look, so you don't need four separate components for grain, static, halftone, and dither."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uqTYzypA1OfLwUSPOE4L","resolved":true,"title":"Grain Field","body":"$69","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Description"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"GrainField is a live WebGL shader overlay that adds grain, static, halftone dot, or ordered-dither texture to any layer in Framer. Instead of shipping one locked visual (as most single-purpose grain or dither components on the marketplace do), it packs four distinct noise algorithms behind one set of controls, so a designer can move from a subtle film-grain wash over a hero photo to a loud retro dither over a dark section without buying or wiring up a second component."}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it above (or below) any content as a transparent, full-bleed layer. Every visual trait — pattern, grain size, intensity, contrast, tint, animation speed, and blend mode — is exposed as a property control, and it degrades gracefully to a CSS/SVG texture in the canvas editor and static exports so it never blocks Framer's automated static-renderer check."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern","marks":[{"type":"bold"}]},{"type":"text","text":" — switches the underlying algorithm between Film Grain, Fine Static, Halftone Dot, and Bayer Dither."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain Size","marks":[{"type":"bold"}]},{"type":"text","text":" — pixel size of each grain/dot cell, from fine to chunky."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall strength/opacity of the effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contrast","marks":[{"type":"bold"}]},{"type":"text","text":" — pushes the noise distribution toward soft or punchy."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint Color","marks":[{"type":"bold"}]},{"type":"text","text":" — any color (including alpha) to tint the texture; alpha also scales intensity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Mono (one noise value per pixel) or Chromatic (independent noise per RGB channel, for subtle color fringing)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animate","marks":[{"type":"bold"}]},{"type":"text","text":" — toggles the flicker on or off; off renders one static frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — how fast the pattern flickers, only shown while Animate is on."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blend Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Normal, Multiply, Screen, Overlay, Soft Light, Difference, or Color Dodge, for compositing against whatever sits behind it."}]}]}]}]},"introduction":"Texture that never looks the same","slug":"grain-field","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a02751-ec23-7372-b731-a14f3f4a9666.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-22T02:37:16.353Z","updatedAt":"2026-08-22T02:37:16.353Z","publishedAt":"2026-08-22T02:37:16.350Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rotating-managers-776603.framer.app/","price":"6","paymentUrl":"https://kireevtimothy.gumroad.com/l/fbszg?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"uKPs98SNhhtqAHgl6F6j","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-22T02:37:16.916Z","updatedAt":"2026-08-22T02:37:16.916Z"},{"id":"01a021da-3506-70ea-bb67-884daadf80ac","title":null,"body":"

Built a liquid glass shader where the pointer actually works as a lens, every uniform is a control, so it reskins to any brand palette instead of locking you into one look.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a liquid glass shader where the pointer actually works as a lens, every uniform is a control, so it reskins to any brand palette instead of locking you into one look."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"iZjaeYrT8Z407oSmlzNs","resolved":true,"title":"Liquid Glass Refract","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Content & color","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors","marks":[{"type":"bold"}]},{"type":"text","text":" — up to five gradient stops, each with its own colour and position. This is the surface the glass refracts."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Angle","marks":[{"type":"bold"}]},{"type":"text","text":" — direction the colour ramp travels across the frame, 0–360°."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — optional. When set, the glass refracts this image instead of the gradient, which makes it CMS-friendly for hero art."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Liquid motion","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distortion","marks":[{"type":"bold"}]},{"type":"text","text":" — how hard the glass bends what sits behind it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — size of the flowing cells; low is broad and calm, high is fine and busy."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — ambient flow speed. Set to 0 for a frozen pane."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Glass character","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dispersion","marks":[{"type":"bold"}]},{"type":"text","text":" — prismatic red/blue split at the edges of the bend."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sheen","marks":[{"type":"bold"}]},{"type":"text","text":" — specular light catching the folds."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge Refraction","marks":[{"type":"bold"}]},{"type":"text","text":" — extra bending near the frame edges, mimicking a thicker glass rim."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain","marks":[{"type":"bold"}]},{"type":"text","text":" — fine film grain, which also helps against gradient banding."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Interaction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Ambient only, Cursor only, or both."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor Size","marks":[{"type":"bold"}]},{"type":"text","text":" — radius of the lens under the pointer, relative to the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor Strength","marks":[{"type":"bold"}]},{"type":"text","text":" — how strongly the pointer pulls and lights the glass."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click Ripples","marks":[{"type":"bold"}]},{"type":"text","text":" — sends a ring of light outward on click or tap."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Layout","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — corner rounding; 0 for a full-bleed section background."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Performance & accessibility","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Quality","marks":[{"type":"bold"}]},{"type":"text","text":" — internal render resolution (High / Balanced / Low). Layout size is unaffected."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pause Offscreen","marks":[{"type":"bold"}]},{"type":"text","text":" — stops rendering while scrolled out of view."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — shows a still frame to visitors with reduced motion enabled in their OS."}]}]}]}]},"introduction":"Glass that bends what's behind it","slug":"liquid-glass-refract","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a021d9-e6d1-755b-9d87-f087c54df396.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-21T01:05:42.761Z","updatedAt":"2026-08-21T01:05:42.761Z","publishedAt":"2026-08-21T01:05:42.759Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://generic-face-453273.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/nqgkgp?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"m5x7RtQgVLd5YRgbk0VJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-21T01:05:43.686Z","updatedAt":"2026-08-21T01:05:43.686Z"},{"id":"01a01d42-687d-740c-a96a-ca238cf7f26d","title":null,"body":"

Level up your site with Dither+ shader.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Level up your site with "},{"type":"text","text":"Dither+","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/EMwY9Bc","target":"_blank"}}]},{"type":"text","text":" shader."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/DUNkXsJYCeGQZ7TdHgnV00puJFftB51A5hnHUrWOuf6c.m3u8","metadata":{"posterUrl":"https://image.mux.com/DUNkXsJYCeGQZ7TdHgnV00puJFftB51A5hnHUrWOuf6c/thumbnail.webp?time=8.4","aspectRatio":"55:36","duration":9.716667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-20T03:41:26.528Z","updatedAt":"2026-08-20T03:41:26.528Z"},{"id":"01a01d3e-932e-7109-b725-77e60ec09815","title":null,"body":"

Prism Glitch Shader is out!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Prism Glitch Shader","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/S7Zvvbn","target":"_blank"}}]},{"type":"text","text":" is out!"}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/mUKU7uJNvY02YeDnyBU3MK00Kqqz4TN4Lv9IQTugo3b2A.m3u8","metadata":{"posterUrl":"https://image.mux.com/mUKU7uJNvY02YeDnyBU3MK00Kqqz4TN4Lv9IQTugo3b2A/thumbnail.webp?time=2.683","aspectRatio":"851:540","duration":4.066667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-20T03:37:15.313Z","updatedAt":"2026-08-20T03:37:15.313Z"},{"id":"01a01d3c-f6c0-72ce-8b27-49ee57315da9","title":null,"body":"

Built a chromatic-glitch shader that works on any image or just two colors, with hover, scroll, cursor, and ambient trigger modes - no more picking one fixed glitch demo.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a chromatic-glitch shader that works on any image or just two colors, with hover, scroll, cursor, and ambient trigger modes - no more picking one fixed glitch demo."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"D4CLAnoMHoWC6680SVyW","resolved":true,"title":"Prism Glitch Shader","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Description"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Prism Glitch Shader is a WebGL fragment-shader effect that splits an image (or a generated two-color gradient, if no image is used) into shifting chromatic-aberration and displacement bands — the \"RGB split glitch\" look, done as a real-time shader instead of a static overlay. It solves a common problem with existing glitch/distortion components: most are locked to one trigger and one visual, so designers either avoid them or end up faking the look with layered PNGs."}]},{"type":"paragraph","content":[{"type":"text","text":"This one is built to be dropped over a hero image, product shot, or gallery thumbnail on almost any site. It can be revealed on hover, on scroll into view, by following the visitor's cursor, or run as a constant ambient loop — and works with just two colors if no image is supplied at all, so it also doubles as an animated gradient background."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — optional photo to apply the effect to; leave empty to use the color gradient instead."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color From / Color To","marks":[{"type":"bold"}]},{"type":"text","text":" — the two colors used to build the animated gradient when no image is set (and as the static-fallback background)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Hover, Scroll Into View, Follow Cursor, or Always On; controls what drives the effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall strength of the distortion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"RGB Split","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of chromatic aberration (red/green/blue channel offset)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Noise Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — size of the underlying wave/noise pattern (broad bands vs. fine detail)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — animation speed of the noise field."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of film-grain noise layered on top."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint Color","marks":[{"type":"bold"}]},{"type":"text","text":" — optional color wash mixed into the effect; transparent by default (off)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — strength of the tint wash."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — rounds the component's corners."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduce Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — when on (default), visitors with \"reduce motion\" enabled see the static image/gradient instead of the animated shader."}]}]}]}]},"introduction":"A chromatic glitch, not a filter","slug":"prism-glitch-shader","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a01d3c-6e1d-765d-a027-a96914e1433f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-20T03:35:29.152Z","updatedAt":"2026-08-20T03:35:29.152Z","publishedAt":"2026-08-20T03:35:29.149Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lovely-prism-621238.framer.app/","price":"6","paymentUrl":"https://kireevtimothy.gumroad.com/l/syuwfc?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"kcM9hQVaxbZypHJmOu1F","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-20T03:35:29.728Z","updatedAt":"2026-08-20T03:35:29.728Z"},{"id":"01a01278-5060-73fd-8cd0-8e8d284edd0b","title":null,"body":"

Built a dither/grain shader that's meant to be layered on any section instead of locked to one hero — four patterns, duotone color, and a transparent overlay mode so it actually reuses across a whole site.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a dither/grain shader that's meant to be layered on any section instead of locked to one hero — four patterns, duotone color, and a transparent overlay mode so it actually reuses across a whole site."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"J3qzkYijoCobci55WFXc","resolved":true,"title":"Dither Grain Overlay","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Description"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site. Most shader backgrounds on the Framer marketplace are locked to one look and one placement — a hero, a full-page fill. This one is built as a general-purpose texture layer: drop it on a card, a footer, a full section, or the whole page, and it adapts to whatever sits beneath it because it can render as a transparent overlay or an opaque background."}]},{"type":"paragraph","content":[{"type":"text","text":"It solves the \"every shader site looks the same\" problem by giving four distinct dithering algorithms (Bayer ordered dither, fine noise grain, blue-noise-style grain, and halftone dots), each with independently tunable density, animation speed, distortion, and color, so two sites using this component rarely look alike."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern","marks":[{"type":"bold"}]},{"type":"text","text":" — switches between Bayer Dither, Noise Grain, Blue Noise, and Halftone Dots algorithms."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layer Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Overlay (transparent, stacks on top of other layers) or Background (opaque fill)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall strength/density of the dither or grain."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — size of the pattern cells, from fine grain to chunky dots."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — animation speed; 0 fully freezes the effect and stops the render loop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distortion","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of animated warp applied to the pattern field."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Monochrome or Duotone."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color A","marks":[{"type":"bold"}]},{"type":"text","text":" — primary color, and the static-render fallback fill."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color B","marks":[{"type":"bold"}]},{"type":"text","text":" — secondary color for Duotone blending and the fallback gradient (hidden unless Duotone is selected)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity","marks":[{"type":"bold"}]},{"type":"text","text":" — overall layer opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blend Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — CSS blend mode (normal, multiply, screen, overlay, soft-light, difference) against whatever sits beneath it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pause Offscreen","marks":[{"type":"bold"}]},{"type":"text","text":" — stops rendering when scrolled out of view, for performance."}]}]}]}]},"introduction":"Animated dither & grain, anywhere","slug":"dither-grain-overlay","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a01278-0c0d-772c-9b21-fb4ebc1d4757.png","metadata":{"tint":{"h":210,"s":90,"l":36},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-18T01:24:29.341Z","updatedAt":"2026-08-18T01:24:29.341Z","publishedAt":"2026-08-18T01:24:29.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://minimal-technology-567258.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/dither-overlay?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"UUDL0MBwAFYtVzlB7Qld","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-18T01:24:29.920Z","updatedAt":"2026-08-18T01:24:29.920Z"},{"id":"01a00d14-edd7-7084-b4d1-76be6fbbec28","title":null,"body":"

Built one shader component that does five looks (dithering, halftone, pixelation, grain, liquid warp) with three trigger modes, so you're not stuck buying a separate component for every effect.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built one shader component that does five looks (dithering, halftone, pixelation, grain, liquid warp) with three trigger modes, so you're not stuck buying a separate component for every effect."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4FyMFB9mbgGoFE2KndPZ","resolved":true,"title":"Shader Shift","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Description"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"ShaderShift is a WebGL shader wrapper for any image: instead of shipping one locked-in visual, it bundles five real fragment-shader effects — Bayer-ordered Dithering, luminance-driven Halftone, Pixelation, animated film Grain, and a Liquid Warp distortion — behind a single \"Effect\" dropdown, so one component can cover a whole site's worth of image treatments."}]},{"type":"paragraph","content":[{"type":"text","text":"It also ships three trigger modes: Ambient (loops continuously), Hover (ramps the effect in on pointer-over and eases it back out), and Scroll Reveal (starts fully stylized and dissolves into the plain photo once the frame scrolls into view). That combination is what makes it a building block rather than a one-off demo — a designer can drop it into a hero image, a portfolio grid, or an editorial photo essay and get a different result each time just by changing dropdowns and colors, with no code edits."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — the source photo (any Framer image, including CMS-bound fields)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Effect","marks":[{"type":"bold"}]},{"type":"text","text":" — Dithering, Halftone, Pixelation, Grain, or Liquid Warp."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Ambient (continuous loop), On Hover, or On Scroll Into View."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — how strongly the effect is mixed over the source image (0–1)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern Scale","marks":[{"type":"bold"}]},{"type":"text","text":" — dot/pixel/grid density for Dithering, Halftone, and Pixelation; wave frequency for Liquid Warp."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — animation speed for Grain and Liquid Warp; 0 freezes on a still frame. Automatically disabled for visitors with reduced-motion enabled."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grayscale Base","marks":[{"type":"bold"}]},{"type":"text","text":" — converts the source image to luminance before applying the duotone colors (Dithering/Halftone)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color A / Color B","marks":[{"type":"bold"}]},{"type":"text","text":" — the duotone palette used by Dithering and Halftone."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal Duration","marks":[{"type":"bold"}]},{"type":"text","text":" — seconds the Scroll Reveal fade takes (only shown when Trigger is set to On Scroll Into View)."}]}]}]}]},"introduction":"Five shader looks, one image","slug":"shader-shift","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a00d14-c9a1-743f-a091-711e66e12b61.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-17T00:17:50.000Z","updatedAt":"2026-08-17T00:17:50.000Z","publishedAt":"2026-08-17T00:17:49.996Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://nurtured-population-033570.framer.app/","price":"9","paymentUrl":"https://kireevtimothy.gumroad.com/l/yuelwz?wanted=true","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"xzQerHJEANv2hdheRYOE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-17T00:17:50.552Z","updatedAt":"2026-08-17T00:17:50.552Z"},{"id":"01a00843-102c-773b-b611-90c2b0baa872","title":null,"body":"

New component is here! Check it out!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component is here! Check it out!"}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PqtAg2rHIN6ZfRUWYLXW","resolved":true,"title":"Flow Current","body":"$6e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FlowCurrent is a WebGL shader background that renders a soft, continuously flowing color field, like dye drifting through water. Flip one Trigger control and it changes behavior entirely: let it drift on its own, bend it toward your cursor, or tie it to scroll speed. It's built to work as a hero background, a section divider, a card background, or a low-opacity overlay on top of other content, not just a one-off hero visual."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize in Framer:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3 color stops for the gradient — any brand palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern Scale, Speed, and Warp Strength to shape how the flow looks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger: Ambient Drift, Cursor Reactive, or Scroll Reactive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reactivity to control how strongly cursor/scroll movement pushes the flow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain for subtle texture and banding reduction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity and Blend Mode (Normal, Screen, Multiply, Overlay, Soft Light) to layer it over other content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Freeze toggle for a still frame instead of animating"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A hero section background that matches your brand colors out of the box"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A section divider or full-bleed atmosphere layer between static content blocks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A faint Screen-blended overlay on top of a product shot or photo grid"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Additional details"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger modes","marks":[{"type":"bold"}]},{"type":"text","text":" — Ambient, Cursor, or Scroll reactive, switchable with one control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color controls","marks":[{"type":"bold"}]},{"type":"text","text":" — 3 gradient stops, works with any brand palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blend mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Normal, Screen, Multiply, Overlay, or Soft Light, so it can sit on top of other content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Graceful fallback","marks":[{"type":"bold"}]},{"type":"text","text":" — static CSS gradient in the canvas editor, static exports, and browsers without WebGL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-aware","marks":[{"type":"bold"}]},{"type":"text","text":" — pauses its render loop when scrolled off-screen"}]}]}]}]},"introduction":"Flowing color that reacts to you","slug":"flow-current","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a00842-c94b-76ac-9527-3373495dc920.png","metadata":{"tint":{"h":192,"s":94,"l":25},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-16T01:50:07.400Z","updatedAt":"2026-08-16T01:50:07.400Z","publishedAt":"2026-08-16T01:50:07.397Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dazzled-path-837074.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/flow-current","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"oDLUPwooVVq4P60nJlP1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-16T01:50:07.916Z","updatedAt":"2026-08-16T01:50:07.916Z"},{"id":"019ff782-28d6-723d-a699-23f3029887b4","title":null,"body":"

Built a halftone dot-screen shader for Framer that reads either an animated gradient or your own image and turns it into print-style dots, with full control over shape, density, angle, colors, and how much it drifts or reacts to your cursor.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a halftone dot-screen shader for Framer that reads either an animated gradient or your own image and turns it into print-style dots, with full control over shape, density, angle, colors, and how much it drifts or reacts to your cursor."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"s0CKMw0m35HQFKWr2uR2","resolved":true,"title":"Halftone Dot Shader","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations available in Framer"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Source","marks":[{"type":"bold"}]},{"type":"text","text":" — switch between a built-in animated gradient and your own image as the input the halftone reads luminance from."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — the image to run the effect over (only shown when Source is set to Image)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ink (dark)","marks":[{"type":"bold"}]},{"type":"text","text":" — dot color used for the darkest areas of the source."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ink (light)","marks":[{"type":"bold"}]},{"type":"text","text":" — dot color used for lighter areas; blended with Ink (dark) across the luminance range."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background","marks":[{"type":"bold"}]},{"type":"text","text":" — the color behind the dots."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape","marks":[{"type":"bold"}]},{"type":"text","text":" — dot grid mark: Circle, Square, or Line screen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Density","marks":[{"type":"bold"}]},{"type":"text","text":" — grid cell size in pixels; lower values pack the dots tighter."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Angle","marks":[{"type":"bold"}]},{"type":"text","text":" — rotation of the dot grid, in degrees."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contrast","marks":[{"type":"bold"}]},{"type":"text","text":" — pushes source luminance toward pure black/white before it drives dot size, for punchier or softer results."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animate","marks":[{"type":"bold"}]},{"type":"text","text":" — toggles the gentle time-based drift on or off (also automatically respects the visitor's OS-level reduced-motion setting)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — playback speed of the animation (shown only when Animate is on)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave amount","marks":[{"type":"bold"}]},{"type":"text","text":" — how much the source and grid ripple/drift over time (shown only when Animate is on)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse reactive","marks":[{"type":"bold"}]},{"type":"text","text":" — toggles a soft cursor-follow highlight in the pattern."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse strength","marks":[{"type":"bold"}]},{"type":"text","text":" — intensity of the cursor highlight (shown only when Mouse reactive is on)."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A portfolio or agency site hero section that turns a plain brand-color gradient into a textured, print-inspired backdrop instead of a flat fill."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A photography or editorial site that runs a hero or case-study image through the effect for a stylized, art-directed treatment rather than showing the raw photo."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A product landing page section background that stays subtly alive (slow drift, cursor reaction) without competing with foreground text, using low Density/Wave/Contrast settings for a quiet effect."}]}]}]}]},"introduction":"Halftone shading for any image.","slug":"halftone-dot-shader","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019ff781-ef19-756e-8fbe-e3a3b841f1ed.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-12T19:45:29.621Z","updatedAt":"2026-08-12T19:45:29.621Z","publishedAt":"2026-08-12T19:45:29.618Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Halftone-Dot-Shader-by9IWV.js@LoNGO9JHljeBTofGX8H2","previewUrl":"https://giving-papaya-764047.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"LoNGO9JHljeBTofGX8H2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-12T19:45:30.326Z","updatedAt":"2026-08-12T19:45:30.326Z"},{"id":"019ff39a-58b1-7731-8379-6789b7f9a1a8","title":null,"body":"

Built a real WebGL shader that tears your image (or a live gradient, if you skip the image) into drifting RGB channels, triggerable by hover, scroll, click, or always-on.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a real WebGL shader that tears your image (or a live gradient, if you skip the image) into drifting RGB channels, triggerable by hover, scroll, click, or always-on."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"22StRFwSoNF38gw1sEn8","resolved":true,"title":"Prism Drift","body":"$70","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations available"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" — optional source photo/graphic. Leave empty to use the built-in animated gradient instead."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overlay","marks":[{"type":"bold"}]},{"type":"text","text":" — optional layer (headline, logo, button) rendered centered on top of the canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger","marks":[{"type":"bold"}]},{"type":"text","text":" — Hover, Always on, Scroll into view, or Click to toggle; swaps the interaction pattern entirely."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Split Amount","marks":[{"type":"bold"}]},{"type":"text","text":" — max RGB channel offset in pixels at full effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Angle","marks":[{"type":"bold"}]},{"type":"text","text":" — direction the channels split apart, in degrees."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Noise / Grain","marks":[{"type":"bold"}]},{"type":"text","text":" — amount of organic jitter in the split plus a fine film-grain overlay."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — playback speed of the shader's internal animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ease","marks":[{"type":"bold"}]},{"type":"text","text":" — how quickly the effect ramps in and out when the trigger changes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grayscale Base","marks":[{"type":"bold"}]},{"type":"text","text":" — desaturates the source before splitting, for a more graphic look."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Idle Drift","marks":[{"type":"bold"}]},{"type":"text","text":" + "},{"type":"text","text":"Idle Amount","marks":[{"type":"bold"}]},{"type":"text","text":" — subtle always-on wobble so the effect never looks frozen at rest, independent of the chosen trigger."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient 1 / 2 / 3","marks":[{"type":"bold"}]},{"type":"text","text":" — the three colors used for the procedural background whenever no Image is set."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — corner rounding, to match the surrounding layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion","marks":[{"type":"bold"}]},{"type":"text","text":" — Auto (respects the visitor's OS reduced-motion setting), Always Animate, or Always Static, so accessibility is a control rather than an afterthought."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A chromatic-glitch hover state on project thumbnails in a design portfolio."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"An animated gradient hero background behind a headline on a product landing page, intensifying as the visitor scrolls it into view."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A click-to-toggle \"glitch reveal\" on a case-study cover image, or a subtle always-on shimmer on a brand mark for an editorial, motion-forward feel."}]}]}]}]},"introduction":"RGB channels, torn apart on purpos","slug":"prism-drift","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019ff396-dadb-73e9-a26f-f3e61875acae.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-12T01:33:25.910Z","updatedAt":"2026-08-12T01:37:40.879Z","publishedAt":"2026-08-12T01:33:25.907Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/PrismDrift-5pDU9r.js@KtVMDGXbQXbOkBJls63K","previewUrl":"https://magenta-cougar-979247.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"KtVMDGXbQXbOkBJls63K","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-12T01:33:26.577Z","updatedAt":"2026-08-12T01:33:26.577Z"},{"id":"019feee7-2d76-71aa-b5af-db3919d074d7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cv8kbNyw2BRYVN0DgpiA","resolved":true,"title":"Cadence Rails","body":"

A visibility-aware kinetic typography hero with alternating headline bands, playback controls, and deterministic static frames.

Customizations

Rails: Up to six messages, notes, colors, directions, speeds, and solid/outline styles
Typography: Display and metadata fonts, responsive sizing, tracking, casing, separators
Layout: Padding, frame and rail radii, height, spacing, angle, mobile breakpoint
Motion: Duration, per-rail speed, hover pausing, playback control, static phase
Appearance: Background, foreground, muted, line and control colors
Texture: Grid, grid scale, grain and vignette
Accessibility: Region label, screen-reader summary, keyboard-accessible playback, reduced motion

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A visibility-aware kinetic typography hero with alternating headline bands, playback controls, and deterministic static frames."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rails:","marks":[{"type":"bold"}]},{"type":"text","text":" Up to six messages, notes, colors, directions, speeds, and solid/outline styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Display and metadata fonts, responsive sizing, tracking, casing, separators"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, frame and rail radii, height, spacing, angle, mobile breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Duration, per-rail speed, hover pausing, playback control, static phase"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appearance:","marks":[{"type":"bold"}]},{"type":"text","text":" Background, foreground, muted, line and control colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Texture:","marks":[{"type":"bold"}]},{"type":"text","text":" Grid, grid scale, grain and vignette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Region label, screen-reader summary, keyboard-accessible playback, reduced motion"}]}]}]}]},"introduction":"Interactive infinite text lines","slug":"cadence-rails","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019feee7-1ec4-744f-8c55-fd37b15bda99.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-11T03:39:15.202Z","updatedAt":"2026-08-11T03:39:15.202Z","publishedAt":"2026-08-11T03:39:15.198Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Cadence-Rails-x8bj6a.js@XHikCJE1vEWpYwy4Vbox","previewUrl":"https://outstanding-triangle-201359.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"XHikCJE1vEWpYwy4Vbox","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T03:39:15.702Z","updatedAt":"2026-08-11T03:39:15.702Z"},{"id":"019fe389-3b61-745b-b871-9c8e5cfedc0c","title":null,"body":"

Made a capability selector! Free to download and copy.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a capability selector! Free to download and copy."}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"K8qi5CinU7GhQ0oeDBXD","resolved":true,"title":"Arc Register","body":"$71","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A radial capability and feature selector with drag, wheel, click, and keyboard navigation—designed for studios, portfolios, and product websites."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizations"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Items:","marks":[{"type":"bold"}]},{"type":"text","text":" Up to eight titles, categories, descriptions, metrics, accent colors and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Drag, wheel, click, arrow keys, Home, End and Page Up/Down"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dial:","marks":[{"type":"bold"}]},{"type":"text","text":" Starting angle, ring width, node size, ticks, coordinates and glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Duration, easing, animation toggle and initial selection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static rendering:","marks":[{"type":"bold"}]},{"type":"text","text":" Independently configurable Canvas/export item"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors:","marks":[{"type":"bold"}]},{"type":"text","text":" Background, central panel, foreground, muted text, rules and controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, radius, dial scale, column gap and mobile breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Independent display, body and metadata fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Links:","marks":[{"type":"bold"}]},{"type":"text","text":" Per-item destinations and optional new-tab behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Semantic tablist/tabpanel structure, focus management and live updates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Event-driven rendering with zero animation frames while idle"}]}]}]},{"type":"paragraph"}]},"introduction":"Radial capability selector","slug":"arc-register","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019fe388-aeda-720e-9765-639eee9bd514.png","metadata":{"tint":{"h":0,"s":75,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-08T22:40:49.033Z","updatedAt":"2026-08-08T22:40:49.033Z","publishedAt":"2026-08-08T22:40:49.023Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Arc-Register-oSXltf.js@2EfCzcljRhjcXbAJ7Jtb","previewUrl":"https://ambitious-employee-765102.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"2EfCzcljRhjcXbAJ7Jtb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-08T22:40:49.507Z","updatedAt":"2026-08-08T22:40:49.507Z"},{"id":"019fdf38-9780-735f-b55d-e41910379ff4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WkzE8RwGDHpBd7n0hOyy","resolved":true,"title":"Relay Curtain","body":"$72","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content:","marks":[{"type":"bold"}]},{"type":"text","text":" Headline, eyebrow, summary, action, index and side note"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curtain:","marks":[{"type":"bold"}]},{"type":"text","text":" 3–10 bands, angle, overlap, alternating direction, numbers and texture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Once or loop playback, duration, stagger, delay, hold, easing and replay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static rendering:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjustable Canvas/export transition frame"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media:","marks":[{"type":"bold"}]},{"type":"text","text":" Responsive image, cover/contain fitting, zoom, overlay and procedural fallback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors:","marks":[{"type":"bold"}]},{"type":"text","text":" Surface, typography, muted text, accent, two curtain colors and rules"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, radius, media proportion, gap and mobile breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Independent display, body and metadata fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Labeled region, keyboard-accessible replay and reduced-motion handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Visibility-aware timers, offscreen transition cancellation and no continuous animation loop"}]}]}]}]},"introduction":"Stripe reveal hero","slug":"relay-curtain","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019fdf38-8237-7129-b2fa-f67803c5b327.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-08T02:34:14.966Z","updatedAt":"2026-08-08T02:34:14.966Z","publishedAt":"2026-08-08T02:34:14.959Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Relay-Curtain-Y9tCdZ.js@ka0hubb9Um6Fk9N9x8jw","previewUrl":"https://pretty-suggestions-879850.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"ka0hubb9Um6Fk9N9x8jw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-08T02:34:15.809Z","updatedAt":"2026-08-08T02:34:15.809Z"},{"id":"019fd914-b2ae-746b-9545-c8a1a9439ce4","title":null,"body":"

New interactive pointer tracking widget is here!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New interactive pointer tracking widget is here!"}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"0Zph4JQ0pgq746TyOv20","resolved":true,"title":"Refraction Plate","body":"$73","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Customizations"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media:","marks":[{"type":"bold"}]},{"type":"text","text":" Optional responsive image with cover or contain fitting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Refraction:","marks":[{"type":"bold"}]},{"type":"text","text":" Distortion, frequency, refraction strength, chromatic separation, pointer radius and influence"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Speed, pointer following, 30/60 FPS and configurable static frame"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Eco, balanced and high rendering quality; viewport and tab visibility tracking"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Texture:","marks":[{"type":"bold"}]},{"type":"text","text":" Procedural grain, vignette and color overlay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors:","marks":[{"type":"bold"}]},{"type":"text","text":" Background, three field colors, foreground, accent and framing lines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, radius and responsive compact breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content:","marks":[{"type":"bold"}]},{"type":"text","text":" Eyebrow, display title, status label and index"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Independent display and metadata font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Decorative or labeled-image modes, keyboard focus and directional controls"}]}]}]},{"type":"paragraph"}]},"introduction":"Pointer tracking shimmer","slug":"refraction-plate","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/019fd913-fbcf-72c9-8d3b-ec449a346299.png","metadata":{"tint":{"h":0,"s":8,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-06T21:57:19.698Z","updatedAt":"2026-08-06T21:57:19.698Z","publishedAt":"2026-08-06T21:57:19.695Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/RefractionPlate-SsbXPD.js@YSbmGHzJnq7Waxa2kvQs","previewUrl":"https://sympathetic-papaya-806807.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"YSbmGHzJnq7Waxa2kvQs","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-06T21:57:20.174Z","updatedAt":"2026-08-06T21:57:20.174Z"}],"pagination":{"next":"MDE5ZmQ5MTQtYjJhZS03NDZiLTk1NDUtYzhhMWE5NDM5Y2U0","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L74"}]