POINT 01
A complete dock rather than scattered icons.
One component handles link data, consistent visual treatment, hover interaction, glass surfaces, and responsive layout.
MDX_SocialPrism
V1.2.2A premium 3D glass social dock for Framer with 43 curated brand icons, safe custom SVGs, responsive directional layouts, and intelligent edge-fade scrolling.
Overview
Social links are often the last detail added to a website, yet the experience can feel fragmented: icons from different sources, uneven sizing, mismatched hover states, and layouts that break on smaller screens. MDX_SocialPrism brings those elements into one refined, configurable social navigation system made for Framer.
The component combines a dimensional glass surface, consistent SVG symbols, optional labels, responsive positioning, and three layout modes. Designers choose their destinations, select a visual theme, and refine the behavior directly from Framer's property panel. There is no icon-font setup, external icon fetching, social authentication, or API key.
Use it as a compact social row, an adaptive footer dock, or a vertical social rail. Its Horizontal and Vertical modes support native scrolling with soft directional fades, while its Custom option accepts validated vector artwork—including wide wordmarks—without sacrificing the unified visual language.
Why Choose MDX_SocialPrism
POINT 02
Curated icon consistency.
Forty-three built-in brand silhouettes and five utility options share a monochrome vector renderer; no imported fonts or mismatched image assets.
POINT 03
Flexible without becoming complicated.
Adaptive, Horizontal, and Vertical are the only layout choices. Theme colors appear only for Custom, and SVG fields appear only for Custom links.
POINT 04
Visual character with practical safeguards.
3D tilt, ambient lighting, and directional scroll fades are balanced with static-render, reduced-motion, and offscreen visibility checks.
POINT 05
Bring your own vector identity.
Validated SVG path data and simple SVG exports support custom symbols and proportionally sized wide wordmarks.
Ideal For
AUDIENCE 01
Framer designers and agencies
who want a distinctive social section without assembling separate interactive elements.
AUDIENCE 02
Creators and portfolio owners
who need several destinations to feel like one cohesive experience.
AUDIENCE 03
SaaS and product teams
presenting community channels and developer profiles.
AUDIENCE 04
Studios and brands
mixing recognized platform icons with a custom vector identity.
AUDIENCE 05
Editorial and personal websites
where a vertical side rail or a compact horizontal dock fits the composition.
Platforms and Destinations
Curated Platform Catalog
43 brand icons: 500px, Bandcamp, Behance, Bluesky, Discord, Dribbble, Etsy, Facebook, Figma, Flickr, GitHub, GitLab, Instagram, Kickstarter, LINE, LinkedIn, Mastodon, Medium, Messenger, Mixcloud, Patreon, Pinterest, Product Hunt, Quora, Reddit, Signal, Snapchat, SoundCloud, Spotify, Stack Overflow, Steam, Strava, Telegram, Threads, TikTok, Tumblr, Twitch, Unsplash, Vimeo, VK, WhatsApp, X, YouTube.
Five utility choices: Website, Email, Phone, Link, and Custom.
How URLs Are Resolved
- Full web URL: Use an `https://` or `http://` destination for any supported platform. These are validated before a link is rendered.
- Supported profile handle: Use a username or `@username` for services with predictable public profile URLs. Examples include Instagram, GitHub, TikTok, YouTube, X, Behance, and Bluesky.
- Platform requiring a specific URL: For Discord, Mastodon, Spotify, Signal, LINE, and other platforms without a single reliable handle format, paste the full destination URL.
- WhatsApp: Enter a full `wa.me` chat URL or a phone number including its country code; the number is converted into a WhatsApp link.
- Email: Enter an email address; the component generates a `mailto:` destination.
- Phone: Enter a valid telephone number; the component generates a `tel:` destination.
- Website, Link, and Custom: Supply a full web URL or a bare domain such as `example.com`. An isolated `@handle` is not a valid Custom destination.
Legacy Twitter platform data is mapped to X. Unsafe URL protocols are rejected. Invalid items show a disabled authoring diagnostic on the static Framer Canvas and are omitted from live/published output.
User Guide
Layout and Motion Guide
FORMAT 01
Adaptive Wrap.
The default responsive layout arranges links horizontally and wraps them into additional rows when the available space narrows. Best for footers, contact sections, and responsive page blocks.
FORMAT 02
Horizontal.
Links stay in a single row. Overflow scrolls sideways using native scrolling with concealed scrollbars and directional edge fades. Best for compact mobile strips and wide social collections.
FORMAT 03
Vertical.
Links stack into a single column inside a tall glass surface. If the frame is shorter than the content, visitors can scroll vertically with matching edge fades. Best for sidebars and social rails.
Understanding Edge-Fade Masks
The mask affects the scrolling icon area only, not the glass surface or ambient lighting. At the beginning, only the trailing edge fades; during scrolling, both edges can fade; at the end, only the leading edge fades. With no overflow, no fade appears. The standard fade width is 32px and decreases automatically in exceptionally narrow viewports.
Motion Options
- Off: No interactive tilt or continuous ambient animation.
- Interactive 3D: Pointer-responsive tilt and supported hover effects, without ambient sweep.
- 3D + Ambient: Interactive motion plus subtle floating movement and a light sweep when permitted.
Motion is suppressed for static Framer rendering and users requesting reduced motion. Runtime animation also pauses when the dock is outside the viewport.
FAQ
Custom SVG and Troubleshooting
Supported Custom SVG Input
Option A — Raw path commands: Paste only the `d` commands. Raw path input uses a 24 × 24 coordinate system.
M12 2L22 22H2ZOption B — Simple complete SVG: Paste the entire `<svg>...</svg>` block with its original `viewBox` and direct, self-closing `<path />` elements.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill-rule="evenodd" d="M10 10H90V90H10Z M30 30V70H70V30Z" />
</svg>The importer permits a numeric viewBox and up to eight validated paths. It does not accept script nodes, images, gradients, references, style blocks, nested groups, transforms, or arbitrary SVG markup. Path fill and stroke colors from the export are not retained; Path Style determines Fill or Stroke and the active theme supplies the color.
For Inkscape exports, remove XML declarations, editor metadata, namespaced elements, and layer wrappers. Flatten group transformations into the actual path geometry in a vector editor before pasting. A standalone `<path d="..." />` tag is not accepted; use raw `d` commands or a complete supported SVG block.
Wordmarks and Aspect Ratio
The source `viewBox` determines the artwork's proportions. Custom artwork wider than an ordinary social icon receives additional button width automatically; the icon height stays tied to Icon Size. A 638 × 97 wordmark can therefore retain its full horizontal identity. Very wide vectors are capped to protect the dock layout, and Adaptive may wrap their buttons on narrow screens.
Common Configuration Issues
POINT 01
The Custom icon is missing.
Check that Platform is Custom, URL / Handle contains a valid web URL or bare domain, and SVG Source contains supported path data. The static Framer Canvas shows a warning for incomplete entries; published output omits them.
POINT 02
An Inkscape SVG does not render.
Simplify the export to a `<svg>` root and direct self-closing `<path />` nodes. Preserve its `viewBox`, but remove group transforms, metadata, styles, and XML headers.
POINT 03
Glass Tint does not change the theme.
Glass Tint, Icon Color, and Accent Glow are effective only when Theme is Custom. Obsidian, Frost, and Aurora use their own palettes.
POINT 04
No fade is visible at the scroll edge.
The mask appears only when there is hidden content in that direction. At the beginning or end, the exhausted edge becomes fully clear.
POINT 05
The Vertical dock feels too short.
Increase the component height in Framer to display more links before scrolling; keep sufficient space for keyboard focus and the glass border.
Marketplace Readiness
Before publishing, verify
Test the final v1.2.2 component in Framer Canvas and live Preview, including at least one published page. Confirm all visible destinations open correctly, with special attention to Custom URLs and mobile interaction.
- Test Adaptive on desktop, tablet, and phone widths with Text Labels off and on.
- Test Horizontal and Vertical overflow at the beginning, middle, and end; confirm masks disappear where scrolling has ended and no scrollbar visuals remain.
- Tab through every link and confirm readable focus outlines and correct destinations.
- Verify all four themes and the conditional position of Custom color controls directly below Theme.
- Test valid and invalid Custom SVG inputs, the full MODAX SVG symbol, and a wide wordmark if used.
- Test Motion Off, reduced-motion preference, and offscreen pause/resume.
- Confirm licensing attribution and a working published Framer demo before marketplace submission.
Get MODAX Releases First
Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.
