Elastic Tape
Elastic tape feature grid with stretchy animations.
Main Features of Elastic Tape
How to Use Elastic Tape in Next.js
Installation Guide for Elastic Tape
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{image: string, title: string, subtitle: string, description: string}> | [{image: '...', title: 'Section', subtitle: '1', description: 'Drag to interact. Scroll to seek.'}, ...] | Array of tape items with image URL, title, subtitle, and description. |
backgroundColor | string | #facc15 | Background color (hex, rgb, or hsl). |
tapeColor | string | #000000 | Tape border and text color (hex, rgb, or hsl). |
warningText | string | WARNING: HEAVY LOAD // | Warning text to repeat on tape. |
scrollText | string | SCROLL TO SEEK | Scroll instruction text. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Perfect for edgy brands, experimental studios, and Next.js portfolios that want an organic 'Elastic Tape' aesthetic. Use this feature layout for an Engaging experience where content feels 'Mailed' and 'Tethered' by physical hazard tape.
Best Practices
Maintain scalable component architecture by keeping the tape colors consistent with your primary palette. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by using efficient physics-lerp calculations.
Why This Component Matters in Modern UI Development
Tape-based physics animations create a sense of digital 'Authenticity' and human touch. This production-ready UI template helpsคุณ build an interface that feels alive and 'Drafted', adding a unique signatures to your brand structure.
Frequently Asked Questions
QIs the 'Tape' real?
The component features localized hazard-tape borders and warning-repeat marquees to simulate a high-fidelity physical tape wrap.
QAre colors editable?
Absolutely, you can change both the `backgroundColor` (default yellow) and `tapeColor` (default black) to create 'Police-Tape' or 'Industrial' effects.
QHow does the 'Seek' work?
The component uses horizontal scroll-sync combined with spring physics, allowing the user to 'Seek' across the feature timeline with organic momentum.