Prisma Nodes: Visualize tech stacks with premium fiber animation - Turn Complex Connections into Beautiful, Living Visuals
Overview
A Canvas-rendered fiber/node system for Framer, built for hero sections, integration showcases, and "connect your tools" layouts — with the kind of low-level control most marketplace components don't expose.
Every line is a real cubic bezier, arc-length sampled and drawn stroke-by-stroke on Canvas 2D — not a CSS trick, not a static SVG with a filter slapped on it. The result holds up at any size, on any device pixel ratio, without the jagged edges or fixed-resolution ceiling that SVG-based competitors run into.
What it doesA configurable number of animated fibers draw themselves in from the edges of the frame toward a central focal point — logo badges at each origin, a customizable center node, and a full continuous "flow" layer that keeps things alive after the entrance completes.
Core FeaturesPer-Fiber Control
Independent thickness, opacity, end cap style, and curve shape for every single fiber
11 distinct entrance animation curves per fiber — Smooth, Elastic Snap, Staggered Segments, Fade, Wave Advance, Accelerate/Decelerate, Bounce, Fluid Morph, Drip, Particle Dissolve, or inherit the global default
Manual bezier handle placement (up to 2 control points) when you need an exact shape — or leave it on Auto and let the layout engine spread and jitter fibers naturally
Each fiber can carry its own flow effect and flow speed independent of the global setting
34 Real Brand Logos, Built In
YouTube, GitHub, Figma, Slack, Stripe, Vercel, Notion, LinkedIn, Apple, Google, Spotify, Discord, OpenAI, React, and 20 more — fetched live with automatic fallback if a CDN request fails, so a broken icon never ships to your visitors
Optional name labels per logo, positioned top/bottom/left/right independently
Color System
Solid, Linear Gradient, or full Spectrum mode
Spectrum cycles a custom color array across fibers automatically — no manual per-fiber color assignment needed
Colors drive the stroke, the glow, and the origin dot together, so everything stays visually consistent without extra setup
Layout Engine
Side-to-Side or Top-to-Bottom flow direction
Focal point position: left, right, center (or top/bottom/center depending on direction)
Adjustable spread, curve tangle, and canvas padding
Entanglement system (None / Mild / Moderate / Intense) for compositions where you want fibers to visually cross and weave rather than run in clean parallel arcs
Entrance Animation
Left-to-right, right-to-left, or center-out reveal
Full control over duration, stagger between fibers, and whether it plays once or replays every time it re-enters view
Intersection-Observer gated — it doesn't waste cycles animating off-screen
Continuous Flow Layer
Once the entrance finishes, choose from Data Stream (traveling dash pattern), Shimmer, Aurora, or Neon Trace — each fiber keeps a subtle life to it instead of going static
Adjustable speed and per-fiber timing randomization for a less mechanical, more organic feel
Automatically pauses when scrolled out of view
Center Node, Three Ways
Drop in one of the 34 built-in logos, upload a custom image, or pass in a Framer slot for full custom content
Seven reveal animations for the center node on arrival: Glow Pulse, Blur Reveal, Slide Up, Scale Bounce, Shutter, Elastic Zoom, or None
Focal Point & Glow
Optional pulsing focal dot with independent color and halo color
Line glow with adjustable blur radius, toggleable on or off
Background
Solid or radial gradient background that automatically centers itself on your chosen focal position — no manual alignment needed
Renders correctly in Framer's static/SSG export path, not just the live canvas
Fully responsive via ResizeObserver — no hardcoded dimensions
Capped device-pixel-ratio rendering keeps it crisp on retina displays without over-rendering on high-DPI setups
Every control is organized into grouped, collapsible sections in the Framer property panel — nothing feels like a flat wall of sliders
Most fiber/network components on the marketplace are a single hardcoded animation with a color picker bolted on. This one is a small rendering engine: real geometry, real per-element control, and a property panel that actually matches what the code does — line for line, feature for feature. If you need it to look a specific way, there's almost always a control for it already.
