LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- PixelCard.html -->
Paste into your page to runPixel Card
About Pixel Card
A pixel-grid card grows from its center or edges to reveal web content. Featuring Five reveal directions and Multiple triggers, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Five reveal directions
- Multiple triggers
- Configurable pixel grid
- Optional centered text
Use cases
- Loading states and progress feedback
- Content cards and feature showcases
- Visual accents in product interfaces
Configuration
Synced with the controlsBackground
ParameterCode keyCurrent value
Background color
backgroundColor#111111Behavior
ParameterCode keyCurrent value
Reveal direction
appearFrommiddleTrigger
triggerdefaultEntry position
enterPositionaboveLoop
enterReplaynoGrid
ParameterCode keyCurrent value
Spacing
gap6Pixel size
pixelSize2pxSpeed
speed80Padding
padding0pxCard
ParameterCode keyCurrent value
Border
borderColor#27272aBorder width
borderWidth1pxCorner radius
radius25pxShow text
showLabelOffText
text—Text color
color#f4f3efColor
ParameterCode keyCurrent value
Pixel colors
colors#ffffff, #d4d4d0, #a7a6a0Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import Pixelcard from "./Pixelcard.jsx";
<Pixelcard />Add the Vue single-file component to your project, import it, and use it in your template.
import Pixelcard from "./Pixelcard.vue";
<Pixelcard />Exports include your current settings. React and Vue components also accept the configuration keys below as props.
Customize in real time, copy standalone code, or export MP4, GIF, and PNG with optional transparency.