COMPONENTS

POSTS BY CATEGORY

SC

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

Renders a radial array of SVG <ellipse> strokes with optional gradient, rotation, and trim-path windows; dimensions adapt via fixed or container-relative radii.

Tags/

svg, ellipse, animation, radial, trim, stroke-dash, gradient, responsive, generative

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

Renders a radial array of SVG <ellipse> strokes with optional gradient, rotation, and trim-path windows; dimensions adapt via fixed or container-relative radii.

Tags/

svg, ellipse, animation, radial, trim, stroke-dash, gradient, responsive, generative

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

Renders a radial array of SVG <ellipse> strokes with optional gradient, rotation, and trim-path windows; dimensions adapt via fixed or container-relative radii.

Tags/

svg, ellipse, animation, radial, trim, stroke-dash, gradient, responsive, generative

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

Renders a radial array of SVG <ellipse> strokes with optional gradient, rotation, and trim-path windows; dimensions adapt via fixed or container-relative radii.

Tags/

svg, ellipse, animation, radial, trim, stroke-dash, gradient, responsive, generative

Aug 28, 2025

5–6 min

SC Breadcrumb

Builds an accessible breadcrumb trail from URL segments with configurable separators/alignment and emits JSON-LD (BreadcrumbList/optional BlogPosting) for SEO.

Tags/

breadcrumb, navigation, seo, schema.org, json-ld, accessibility

Aug 28, 2025

5–6 min

SC Breadcrumb

Builds an accessible breadcrumb trail from URL segments with configurable separators/alignment and emits JSON-LD (BreadcrumbList/optional BlogPosting) for SEO.

Tags/

breadcrumb, navigation, seo, schema.org, json-ld, accessibility

Aug 28, 2025

5–6 min

SC Breadcrumb

Builds an accessible breadcrumb trail from URL segments with configurable separators/alignment and emits JSON-LD (BreadcrumbList/optional BlogPosting) for SEO.

Tags/

breadcrumb, navigation, seo, schema.org, json-ld, accessibility

Aug 28, 2025

5–6 min

SC Breadcrumb

Builds an accessible breadcrumb trail from URL segments with configurable separators/alignment and emits JSON-LD (BreadcrumbList/optional BlogPosting) for SEO.

Tags/

breadcrumb, navigation, seo, schema.org, json-ld, accessibility

Categories

Categories

Categories

Categories

[ 48 ]

Hex is the AI-powered analytics workspace built for teams driving faster answers and better decisions.

Framer

[14]

Marketing

[25]

Articles

[8]

News

[19]

Updates

[5]

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

A highly customizable SVG animation that draws multiple rotating ellipses in radial symmetry. Supports trim-path style reveals, gradient strokes, and responsive sizing—perfect for abstract loaders, hypnotic loops, animated backgrounds, and generative motifs.

SecretoCho

Code Component

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

A highly customizable SVG animation that draws multiple rotating ellipses in radial symmetry. Supports trim-path style reveals, gradient strokes, and responsive sizing—perfect for abstract loaders, hypnotic loops, animated backgrounds, and generative motifs.

SecretoCho

Code Component

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

A highly customizable SVG animation that draws multiple rotating ellipses in radial symmetry. Supports trim-path style reveals, gradient strokes, and responsive sizing—perfect for abstract loaders, hypnotic loops, animated backgrounds, and generative motifs.

SecretoCho

Code Component

Apr 27, 2025

7–9 min

SC Animated Radial Ellipse

A highly customizable SVG animation that draws multiple rotating ellipses in radial symmetry. Supports trim-path style reveals, gradient strokes, and responsive sizing—perfect for abstract loaders, hypnotic loops, animated backgrounds, and generative motifs.

SecretoCho

Code Component

Aug 28, 2025

5–6 min

SC Breadcrumb

SC Breadcrumb builds a clean, responsive breadcrumb trail from the current URL, with configurable separator, max items (auto-ellipsis), alignment, and typography. It can also output schema.org JSON-LD for SEO (BreadcrumbList + optional BlogPosting), with empty-field cleanup for tidy markup.

SecretoCho

Code Component

Aug 28, 2025

5–6 min

SC Breadcrumb

SC Breadcrumb builds a clean, responsive breadcrumb trail from the current URL, with configurable separator, max items (auto-ellipsis), alignment, and typography. It can also output schema.org JSON-LD for SEO (BreadcrumbList + optional BlogPosting), with empty-field cleanup for tidy markup.

SecretoCho

Code Component

Aug 28, 2025

5–6 min

SC Breadcrumb

SC Breadcrumb builds a clean, responsive breadcrumb trail from the current URL, with configurable separator, max items (auto-ellipsis), alignment, and typography. It can also output schema.org JSON-LD for SEO (BreadcrumbList + optional BlogPosting), with empty-field cleanup for tidy markup.

SecretoCho

Code Component

Aug 28, 2025

5–6 min

SC Breadcrumb

SC Breadcrumb builds a clean, responsive breadcrumb trail from the current URL, with configurable separator, max items (auto-ellipsis), alignment, and typography. It can also output schema.org JSON-LD for SEO (BreadcrumbList + optional BlogPosting), with empty-field cleanup for tidy markup.

SecretoCho

Code Component

Aug 26, 2025

3–5 min

SC Corner Lines

SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.

SecretoCho

Code Component

Aug 26, 2025

3–5 min

SC Corner Lines

SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.

SecretoCho

Code Component

Aug 26, 2025

3–5 min

SC Corner Lines

SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.

SecretoCho

Code Component

Aug 26, 2025

3–5 min

SC Corner Lines

SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.

SecretoCho

Code Component

Sep 1, 2025

time

SC Country Name & Flag List

A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.

SecretoCho

Code Component

Sep 1, 2025

time

SC Country Name & Flag List

A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.

SecretoCho

Code Component

Sep 1, 2025

time

SC Country Name & Flag List

A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.

SecretoCho

Code Component

Sep 1, 2025

time

SC Country Name & Flag List

A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.

SecretoCho

Code Component

7–9 min

SC CSS Pattern

SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills. Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.

SecretoCho

Code Component

7–9 min

SC CSS Pattern

SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills. Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.

SecretoCho

Code Component

7–9 min

SC CSS Pattern

SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills. Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.

SecretoCho

Code Component

7–9 min

SC CSS Pattern

SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills. Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.

SecretoCho

Code Component

Aug 28, 2025

4–6 min

SC Debug Overlay Pro

A minimal, terminal-style diagnostics panel for Framer canvases. It shows a live FPS sparkline, optional memory usage (Chromium’s performance.memory), and a toggleable console log feed with type filters and one-click export. Logs persist across reloads via localStorage so you can reproduce and retrieve issues.

SecretoCho

Code Component

Aug 28, 2025

4–6 min

SC Debug Overlay Pro

A minimal, terminal-style diagnostics panel for Framer canvases. It shows a live FPS sparkline, optional memory usage (Chromium’s performance.memory), and a toggleable console log feed with type filters and one-click export. Logs persist across reloads via localStorage so you can reproduce and retrieve issues.

SecretoCho

Code Component

Aug 28, 2025

4–6 min

SC Debug Overlay Pro

A minimal, terminal-style diagnostics panel for Framer canvases. It shows a live FPS sparkline, optional memory usage (Chromium’s performance.memory), and a toggleable console log feed with type filters and one-click export. Logs persist across reloads via localStorage so you can reproduce and retrieve issues.

SecretoCho

Code Component

Aug 28, 2025

4–6 min

SC Debug Overlay Pro

A minimal, terminal-style diagnostics panel for Framer canvases. It shows a live FPS sparkline, optional memory usage (Chromium’s performance.memory), and a toggleable console log feed with type filters and one-click export. Logs persist across reloads via localStorage so you can reproduce and retrieve issues.

SecretoCho

Code Component

Aug 26, 2025

6–8 min

SC Golden Spiral

An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.

SecretoCho

Code Component

Aug 26, 2025

6–8 min

SC Golden Spiral

An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.

SecretoCho

Code Component

Aug 26, 2025

6–8 min

SC Golden Spiral

An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.

SecretoCho

Code Component

Aug 26, 2025

6–8 min

SC Golden Spiral

An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.

SecretoCho

Code Component

Sep 1, 2025

time

SC Gradient Border

A pure-CSS gradient border wrapper for Framer. Uses layered masks to “punch out” the center, leaving a crisp, GPU-friendly gradient ring around your content area. Fully configurable via color stops, angle, width, and radius.

SecretoCho

Code Component

Sep 1, 2025

time

SC Gradient Border

A pure-CSS gradient border wrapper for Framer. Uses layered masks to “punch out” the center, leaving a crisp, GPU-friendly gradient ring around your content area. Fully configurable via color stops, angle, width, and radius.

SecretoCho

Code Component

Sep 1, 2025

time

SC Gradient Border

A pure-CSS gradient border wrapper for Framer. Uses layered masks to “punch out” the center, leaving a crisp, GPU-friendly gradient ring around your content area. Fully configurable via color stops, angle, width, and radius.

SecretoCho

Code Component

Sep 1, 2025

time

SC Gradient Border

A pure-CSS gradient border wrapper for Framer. Uses layered masks to “punch out” the center, leaving a crisp, GPU-friendly gradient ring around your content area. Fully configurable via color stops, angle, width, and radius.

SecretoCho

Code Component

Sep 1, 2025

time

SC Neon Wave Shader

A WebGL-based neon shader effect for Framer. Renders an animated glowing wave with hue-shifted neon colors, interactive hover response, and real-time distortion. Ideal for futuristic hero sections, reactive backgrounds, or experimental UI flourishes.

SecretoCho

Code Component

Sep 1, 2025

time

SC Neon Wave Shader

A WebGL-based neon shader effect for Framer. Renders an animated glowing wave with hue-shifted neon colors, interactive hover response, and real-time distortion. Ideal for futuristic hero sections, reactive backgrounds, or experimental UI flourishes.

SecretoCho

Code Component

Sep 1, 2025

time

SC Neon Wave Shader

A WebGL-based neon shader effect for Framer. Renders an animated glowing wave with hue-shifted neon colors, interactive hover response, and real-time distortion. Ideal for futuristic hero sections, reactive backgrounds, or experimental UI flourishes.

SecretoCho

Code Component

Sep 1, 2025

time

SC Neon Wave Shader

A WebGL-based neon shader effect for Framer. Renders an animated glowing wave with hue-shifted neon colors, interactive hover response, and real-time distortion. Ideal for futuristic hero sections, reactive backgrounds, or experimental UI flourishes.

SecretoCho

Code Component

Aug 28, 2025

12–15 min

SC Rich Text Enhanced

A CMS-friendly rich-text renderer with precise spacing control, optional variable-font axes, scoped per-instance CSS injection, and a built-in HTML sanitizer (toggleable). Great for long-form articles, case-study bodies, and doc pages where you want consistent rhythm for paragraphs, lists, and headings.

SecretoCho

Code Component

Aug 28, 2025

12–15 min

SC Rich Text Enhanced

A CMS-friendly rich-text renderer with precise spacing control, optional variable-font axes, scoped per-instance CSS injection, and a built-in HTML sanitizer (toggleable). Great for long-form articles, case-study bodies, and doc pages where you want consistent rhythm for paragraphs, lists, and headings.

SecretoCho

Code Component

Aug 28, 2025

12–15 min

SC Rich Text Enhanced

A CMS-friendly rich-text renderer with precise spacing control, optional variable-font axes, scoped per-instance CSS injection, and a built-in HTML sanitizer (toggleable). Great for long-form articles, case-study bodies, and doc pages where you want consistent rhythm for paragraphs, lists, and headings.

SecretoCho

Code Component

Aug 28, 2025

12–15 min

SC Rich Text Enhanced

A CMS-friendly rich-text renderer with precise spacing control, optional variable-font axes, scoped per-instance CSS injection, and a built-in HTML sanitizer (toggleable). Great for long-form articles, case-study bodies, and doc pages where you want consistent rhythm for paragraphs, lists, and headings.

SecretoCho

Code Component

Aug 26, 2025

8–11 min

SC Simple Data Display (Pattern)

CMS-friendly label/value list with an optional pattern column for visual rhythm. Supports variable-font axes per column, responsive switch to a stacked layout, and a friendly placeholder when no data is provided.

SecretoCho

Code Component

Aug 26, 2025

8–11 min

SC Simple Data Display (Pattern)

CMS-friendly label/value list with an optional pattern column for visual rhythm. Supports variable-font axes per column, responsive switch to a stacked layout, and a friendly placeholder when no data is provided.

SecretoCho

Code Component

Aug 26, 2025

8–11 min

SC Simple Data Display (Pattern)

CMS-friendly label/value list with an optional pattern column for visual rhythm. Supports variable-font axes per column, responsive switch to a stacked layout, and a friendly placeholder when no data is provided.

SecretoCho

Code Component

Aug 26, 2025

8–11 min

SC Simple Data Display (Pattern)

CMS-friendly label/value list with an optional pattern column for visual rhythm. Supports variable-font axes per column, responsive switch to a stacked layout, and a friendly placeholder when no data is provided.

SecretoCho

Code Component

Aug 28, 2025

6–8 min

SC Tag Display

A lightweight tag/chip renderer for Framer. Feed it a comma-separated list and it outputs accessible, responsive pills with configurable padding, gap, border, and colors. If your primary typeface ships a “Variable” face (e.g., Recursive Variable), you can animate axes on hover for a subtle, high-end typographic feel.

SecretoCho

Code Component

Aug 28, 2025

6–8 min

SC Tag Display

A lightweight tag/chip renderer for Framer. Feed it a comma-separated list and it outputs accessible, responsive pills with configurable padding, gap, border, and colors. If your primary typeface ships a “Variable” face (e.g., Recursive Variable), you can animate axes on hover for a subtle, high-end typographic feel.

SecretoCho

Code Component

Aug 28, 2025

6–8 min

SC Tag Display

A lightweight tag/chip renderer for Framer. Feed it a comma-separated list and it outputs accessible, responsive pills with configurable padding, gap, border, and colors. If your primary typeface ships a “Variable” face (e.g., Recursive Variable), you can animate axes on hover for a subtle, high-end typographic feel.

SecretoCho

Code Component

Aug 28, 2025

6–8 min

SC Tag Display

A lightweight tag/chip renderer for Framer. Feed it a comma-separated list and it outputs accessible, responsive pills with configurable padding, gap, border, and colors. If your primary typeface ships a “Variable” face (e.g., Recursive Variable), you can animate axes on hover for a subtle, high-end typographic feel.

SecretoCho

Code Component

Sep 1, 2025

time

SC Theme Image Switcher

A theme-aware image component for Framer that automatically swaps between light and dark images. It can detect the current theme via system preference, Framer’s theme attributes, or both (recommended), and updates live on changes. Supports configurable size, object-fit, and corner radius, with graceful empty-state hints when an image is missing.

SecretoCho

Code Component

Sep 1, 2025

time

SC Theme Image Switcher

A theme-aware image component for Framer that automatically swaps between light and dark images. It can detect the current theme via system preference, Framer’s theme attributes, or both (recommended), and updates live on changes. Supports configurable size, object-fit, and corner radius, with graceful empty-state hints when an image is missing.

SecretoCho

Code Component

Sep 1, 2025

time

SC Theme Image Switcher

A theme-aware image component for Framer that automatically swaps between light and dark images. It can detect the current theme via system preference, Framer’s theme attributes, or both (recommended), and updates live on changes. Supports configurable size, object-fit, and corner radius, with graceful empty-state hints when an image is missing.

SecretoCho

Code Component

Sep 1, 2025

time

SC Theme Image Switcher

A theme-aware image component for Framer that automatically swaps between light and dark images. It can detect the current theme via system preference, Framer’s theme attributes, or both (recommended), and updates live on changes. Supports configurable size, object-fit, and corner radius, with graceful empty-state hints when an image is missing.

SecretoCho

Code Component

Aug 26, 2025

12–16 min

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles is an audio-reactive particle field powered by Three.js and custom GLSL shaders. Particles swirl with curl-noise motion, expand and pulse to live microphone input, and color-shift across low/mid/high bands. Supports mouse orbit or gyroscope look controls and runs as a full-bleed WebGL canvas inside Framer. Great for music heroes, landing backgrounds, VJ loops, or meditative reactive visuals.

SecretoCho

Code Component

Aug 26, 2025

12–16 min

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles is an audio-reactive particle field powered by Three.js and custom GLSL shaders. Particles swirl with curl-noise motion, expand and pulse to live microphone input, and color-shift across low/mid/high bands. Supports mouse orbit or gyroscope look controls and runs as a full-bleed WebGL canvas inside Framer. Great for music heroes, landing backgrounds, VJ loops, or meditative reactive visuals.

SecretoCho

Code Component

Aug 26, 2025

12–16 min

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles is an audio-reactive particle field powered by Three.js and custom GLSL shaders. Particles swirl with curl-noise motion, expand and pulse to live microphone input, and color-shift across low/mid/high bands. Supports mouse orbit or gyroscope look controls and runs as a full-bleed WebGL canvas inside Framer. Great for music heroes, landing backgrounds, VJ loops, or meditative reactive visuals.

SecretoCho

Code Component

Aug 26, 2025

12–16 min

SC ThreeJS Audio Particles

SC ThreeJS Audio Particles is an audio-reactive particle field powered by Three.js and custom GLSL shaders. Particles swirl with curl-noise motion, expand and pulse to live microphone input, and color-shift across low/mid/high bands. Supports mouse orbit or gyroscope look controls and runs as a full-bleed WebGL canvas inside Framer. Great for music heroes, landing backgrounds, VJ loops, or meditative reactive visuals.

SecretoCho

Code Component

Sep 1, 2025

time

SC Typewriter Title

A configurable typewriter headline for Framer. Displays a fixed lead-in plus a rotating list of phrases, typed and erased with a blinking caret. Tunable typing speed, hold time, caret style, layout (inline/stacked), and full typography controls.

SecretoCho

Code Component

Sep 1, 2025

time

SC Typewriter Title

A configurable typewriter headline for Framer. Displays a fixed lead-in plus a rotating list of phrases, typed and erased with a blinking caret. Tunable typing speed, hold time, caret style, layout (inline/stacked), and full typography controls.

SecretoCho

Code Component

Sep 1, 2025

time

SC Typewriter Title

A configurable typewriter headline for Framer. Displays a fixed lead-in plus a rotating list of phrases, typed and erased with a blinking caret. Tunable typing speed, hold time, caret style, layout (inline/stacked), and full typography controls.

SecretoCho

Code Component

Sep 1, 2025

time

SC Typewriter Title

A configurable typewriter headline for Framer. Displays a fixed lead-in plus a rotating list of phrases, typed and erased with a blinking caret. Tunable typing speed, hold time, caret style, layout (inline/stacked), and full typography controls.

SecretoCho

Code Component

Stay ahead of the curve with insights into emerging visualization trends and technologies.