Holographic Sticker
Holographic Sticker
HoloSticker is a Framer code component that creates a circular holographic sticker featuring an animated rim, customizable logo, and optional ring text. Designed for responsiveness, it offers various visual effects such as rotation, distortion, and grain, making it a versatile tool for enhancing designs.
Frequently asked questions
What is HoloSticker?
HoloSticker is a Framer code component that renders a circular holographic sticker with optional rotation, distortion, grain, ring text, and an interchangeable center logo.
How does it stay responsive?
It measures its rendered size using ResizeObserver and derives a working size value (S). All thicknesses, insets, and effects scale from S.
How do I replace the logo?
In the Logo controls, upload an image or paste a URL. Upload takes priority over the URL field. If neither is provided, the component falls back to its default logo URL.
What is the difference between Logo modes?
Original renders the image as-is. Mono applies grayscale and contrast for a monochrome look. Holo Fill uses the logo image as a mask and fills it with a holographic conic gradient.
How do I turn off the continuous spinning?
Disable Motion > Rotate.
What does the distortion option do?
Distortion applies an SVG displacement filter that subtly warps the rim and center surfaces. It can be disabled entirely, or automatically disabled when the component is small.
Why does the distortion change over time?
When rotation is enabled, the SVG turbulence can animate its frequency, which creates a living holographic warp instead of a static distortion.
What does the grain slider do?
Grain adds a soft noise overlay generated from an inline SVG fractal noise data URL. Set it to 0 to remove the overlay.
How do I remove the ring text?
Disable Band > Show Text. You can also disable the band ring itself with Band > Show Ring.
Can I hide the ring text only on small sizes?
Yes. Enable Optimization > Auto Hide Text and set Hide Under to a size threshold.
How do I adjust the ring text spacing?
Use Type > Tracking to control letter spacing around the circular path.
Does it support touch devices?
The component uses pointer events, so it can respond on touch-enabled devices. Tilt and shine may feel different on touch compared to mouse.
How do I reduce CPU usage on mobile?
Turn off rotation, disable distortion, reduce shimmer and grain, and rely on Optimization settings to simplify effects at small sizes.
Can I use multiple stickers on the same page?
Yes. The component generates a unique SVG filter id per instance so the filters do not collide.
What should the accessibility label be?
Set A11y > Label to a short description such as "Holographic sticker" or a more specific label based on the logo and context.
