A Canvas-rendered fiber and node system for Framer, built for hero sections, integration showcases, and connect-your-tools layouts. Fibers are drawn stroke-by-stroke on Canvas 2D so they scale cleanly at any size and device pixel ratio, rather than using CSS tricks or static SVG filters.
Configurable fibers draw in from the edges toward a central focal point, with logo badges at each origin, an optional center node, and a continuous flow layer after the entrance completes. Per-fiber controls include independent thickness, opacity, end cap style, curve shape, flow effect, and flow speed. You can place bezier handles manually, up to two control points, or use Auto layout jitter. There are 11 entrance animation curves, optional name labels positioned top, bottom, left, or right, and a color system with Solid, Linear Gradient, or Spectrum mode. Spectrum cycles a custom color array across fibers automatically. 34 real brand logos are built in and fetched live with automatic fallback.
What's inside
- Canvas-rendered fiber/node Framer component
- Per-fiber control: thickness, opacity, end cap, curve shape
- 11 entrance animation curves
- Manual bezier handle placement, up to 2 control points, or Auto layout
- Per-fiber flow effect and independent flow speed
- 34 built-in brand logos (YouTube, GitHub, Figma, Slack, Stripe, Vercel, Notion, LinkedIn, Apple, Google, Spotify, Discord, OpenAI, React, and 20 more), fetched live with automatic fallback
- Optional name labels with top/bottom/left/right positioning
- Color system: Solid, Linear Gradient, Spectrum mode, colors drive the stroke, the glow, and the origin dot
