Collage Art

拼贴艺术风组件配方

组件变体

font-bold uppercase tracking-wider rounded-sm border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out bg-[#e74c3c] text-white shadow-[4px_4px_0px_#2d2d2d] hover:rotate-0 hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[2px_2px_0px_#2d2d2d] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none

button

按钮

Paper cutout button with random rotation transform, hard offset shadow, thick border, and mixed-font uppercase text for zine aesthetic

基础骨架: font-bold uppercase tracking-wider rounded-sm border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out
变体: 红色剪切、蓝色剪切、黄色剪切、虚线
状态: hover、active、disabled

card

卡片

Layered paper cutout card with random rotation, colored hard offset shadow, washi tape decoration pseudo-element, and torn-edge clip-path option

基础骨架: bg-[#f5f0e8] rounded-none border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out
变体: 默认、红色、蓝色、黄色、紫色
状态: hover

input

输入框

Newspaper cutout input with sharp corners, thick border, mixed-font labels across serif/sans/mono, and hard shadow focus state

基础骨架: w-full rounded-none border-2 border-[#2d2d2d] bg-[#f5f0e8] text-[#2d2d2d] placeholder:text-[#2d2d2d]/30 focus:outline-none transition-all duration-200 ease-in-out
变体: 默认、无衬线、等宽、虚线
状态: focus、disabled

tornPaperCard

撕纸卡片

Card with torn/ripped paper edge effect

基础骨架: bg-[#f5f0e8] rounded-none border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out relative
变体: 默认、复古、彩色
状态: hover

layeredStack

层叠堆栈

Stacked layers with slight offset for depth

基础骨架: bg-[#f5f0e8] rounded-none border-2 border-[#2d2d2d] p-5 md:p-8 transition-all duration-200 ease-in-out relative
变体: 默认、散落、整齐
状态: hover

cutoutBadge

剪切徽章

Badge styled like a magazine cutout

基础骨架: inline-flex items-center justify-center font-bold uppercase tracking-wider border-2 border-[#2d2d2d] rounded-none transition-all duration-200 ease-in-out
变体: 红色、蓝色、黄色、混合
状态: hover

maskingTapeDivider

纸胶带分割线

Divider styled like masking/washi tape

基础骨架: w-full h-6 md:h-8 my-4 transition-all duration-200 ease-in-out
变体: 默认、彩色、复古
状态: 静态

scrapbookFrame

剪贴簿相框

Photo frame with scrapbook decoration

基础骨架: bg-white border-2 border-[#2d2d2d] transition-all duration-200 ease-in-out relative
变体: 默认、拍立得、复古
状态: hover