c1d278b6e5
- Like/Plus/Nachmachen/Generieren als Liquid-Metal: WebGL-Shader (esm.sh @paper-design/shaders, liquidMetalFragmentShader) ueber Metall-Gradient- Fallback, schwarzer Kern, graues Icon mit Schattenwurf - Nav-Glas: bl-glass-refract (feImage-Displacement-Map mit RGB-Split, aus Nav-Groesse dynamisch generiert) + blur(3px) saturate(1.15), Weiss .12, Ring .4/.3; Layer als echte divs statt Pseudo-Elemente - Create komplett neu (aus BrandLoop.dc.html): Vorschau-Stack mit Ketten- Faecher + Dots + Video-Badge, Optionen-Accordion (Typ/Format/Kette), Prompt-Box mit Border-Beam (border-beam.css), Liquid-Metal-Generate, Fake-iOS-Tastatur mit @Modell-Tokens (inputmode=none gegen echte Tastatur), interner Scroll + body.noscroll auch fuer Create Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
179 lines
6.6 KiB
CSS
179 lines
6.6 KiB
CSS
|
|
@property --beam-angle-bb {
|
|
syntax: "<angle>";
|
|
initial-value: 0deg;
|
|
inherits: true;
|
|
}
|
|
|
|
@property --beam-opacity-bb {
|
|
syntax: "<number>";
|
|
initial-value: 0;
|
|
inherits: true;
|
|
}
|
|
|
|
[data-beam="bb"] {
|
|
position: relative;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-beam="bb"][data-active] {
|
|
animation:
|
|
beam-spin-bb 1.96s linear infinite,
|
|
beam-fade-in-bb 0.6s ease forwards;
|
|
}
|
|
|
|
[data-beam="bb"][data-active]::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 23px;
|
|
padding: 1px;
|
|
clip-path: inset(0 round 24px);
|
|
background: conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 54%,
|
|
rgba(255, 255, 255, 0.1) 57%,
|
|
rgba(255, 255, 255, 0.3) 60%,
|
|
rgba(255, 255, 255, 0.6) 63%,
|
|
rgba(255, 255, 255, 0.75) 66%,
|
|
rgba(255, 255, 255, 0.6) 69%,
|
|
rgba(255, 255, 255, 0.3) 72%,
|
|
rgba(255, 255, 255, 0.1) 75%,
|
|
transparent 78%, transparent 100%
|
|
),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent),
|
|
radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent),
|
|
radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent),
|
|
radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent),
|
|
radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent),
|
|
radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent),
|
|
radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent),
|
|
radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent),
|
|
radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent);
|
|
-webkit-mask:
|
|
conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 30%,
|
|
rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
|
|
white 52%, white 80%,
|
|
rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
|
|
transparent 95%, transparent 100%
|
|
),
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: source-in, xor;
|
|
mask:
|
|
conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 30%,
|
|
rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
|
|
white 52%, white 80%,
|
|
rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
|
|
transparent 95%, transparent 100%
|
|
),
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: intersect, exclude;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
opacity: calc(var(--beam-opacity-bb) * 0.26 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
|
|
animation: beam-hue-shift-bb 12s ease-in-out infinite;
|
|
}
|
|
|
|
[data-beam="bb"][data-active]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 24px;
|
|
background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent),
|
|
radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent),
|
|
radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent),
|
|
radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent),
|
|
radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent),
|
|
radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent),
|
|
radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent),
|
|
radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent),
|
|
radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
|
|
box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27);
|
|
-webkit-mask-image:
|
|
conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 30%,
|
|
rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
|
|
white 52%, white 80%,
|
|
rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
|
|
transparent 95%, transparent 100%
|
|
),
|
|
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
|
|
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
|
|
-webkit-mask-composite: source-in, source-over;
|
|
mask-image:
|
|
conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 30%,
|
|
rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
|
|
white 52%, white 80%,
|
|
rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
|
|
transparent 95%, transparent 100%
|
|
),
|
|
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
|
|
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
|
|
mask-composite: intersect, add;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: calc(var(--beam-opacity-bb) * 0.42 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
|
|
clip-path: inset(0 round 24px);
|
|
animation: beam-hue-shift-bb 12s ease-in-out infinite;
|
|
}
|
|
|
|
[data-beam="bb"] [data-beam-bloom] {
|
|
display: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 23px;
|
|
clip-path: inset(0 round 24px);
|
|
background: conic-gradient(
|
|
from var(--beam-angle-bb),
|
|
transparent 0%, transparent 58%,
|
|
rgba(255, 255, 255, 0.03) 62%,
|
|
rgba(255, 255, 255, 0.08) 65%,
|
|
rgba(255, 255, 255, 0.2) 67%,
|
|
rgba(255, 255, 255, 0.45) 69%,
|
|
rgba(255, 255, 255, 0.85) 70%,
|
|
rgba(255, 255, 255, 0.85) 70.5%,
|
|
rgba(255, 255, 255, 0.45) 71.5%,
|
|
rgba(255, 255, 255, 0.2) 73%,
|
|
rgba(255, 255, 255, 0.08) 75%,
|
|
rgba(255, 255, 255, 0.03) 78%,
|
|
transparent 82%
|
|
);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
padding: 1px;
|
|
filter: blur(8px) brightness(1.30) saturate(1.20);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-beam="bb"][data-active] [data-beam-bloom] {
|
|
display: block;
|
|
opacity: calc(var(--beam-opacity-bb) * 0.24 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
|
|
}
|
|
|
|
@keyframes beam-spin-bb {
|
|
to { --beam-angle-bb: 360deg; }
|
|
}
|
|
|
|
@keyframes beam-fade-in-bb {
|
|
to { --beam-opacity-bb: 1; }
|
|
}
|
|
|
|
@keyframes beam-hue-shift-bb {
|
|
0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
|
|
50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); }
|
|
100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
|
|
}
|