mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
Add black mascot animation variants (15 compositions) (#1343)
Co-authored-by: Neel Mistry <neelmistry@Neels-MacBook-Pro.local> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Neil
co-authored by
Neel Mistry
Claude Sonnet 4.6
Neel Mistry
Claude Sonnet 4.6
parent
37cd17889c
commit
2a9bc8f58b
@@ -0,0 +1,356 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
Easing,
|
||||
interpolate,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
|
||||
export const BlackMascotCelebrate: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmcl-${k}`;
|
||||
|
||||
// ── Body bob — energetic 2 Hz bounce ────────────────────────────────────
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 2.0) * 16;
|
||||
|
||||
// ── Head drift + squash ──────────────────────────────────────────────────
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const headDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const headDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const headSquashY = 1 - 0.09 * press;
|
||||
const headSquashX = 1 + 0.06 * press;
|
||||
|
||||
// ── Hat wobble ───────────────────────────────────────────────────────────
|
||||
const hatWobble = Math.sin((frame / fps) * Math.PI * 1.4) * 3.5;
|
||||
|
||||
// ── Left arm — enthusiastic wave ─────────────────────────────────────────
|
||||
const leftArmAngle =
|
||||
-50 + Math.sin((frame / fps) * Math.PI * 3.0) * 18;
|
||||
|
||||
// ── Right arm + horn — wave together ─────────────────────────────────────
|
||||
const hornWave = Math.sin((frame / fps) * Math.PI * 2.5 + 0.5) * 8;
|
||||
|
||||
// ── Confetti sparkle pulses ───────────────────────────────────────────────
|
||||
const sp = (phase: number) =>
|
||||
0.62 + Math.sin((frame / fps) * Math.PI * 1.8 + phase) * 0.32;
|
||||
|
||||
// ── Falling confetti particles ────────────────────────────────────────────
|
||||
const fallingDefs = [
|
||||
{ delay: 0, x: 130, drift: 22, color: "#3C5FAD", w: 12, h: 8 },
|
||||
{ delay: 8, x: 255, drift: -17, color: "#FBD387", w: 9, h: 9 },
|
||||
{ delay: 3, x: 375, drift: 25, color: "#B1D37E", w: 11, h: 7 },
|
||||
{ delay: 14, x: 495, drift: -20, color: "#929ED3", w: 8, h: 10 },
|
||||
{ delay: 1, x: 630, drift: 18, color: "#F5A29A", w: 10, h: 8 },
|
||||
{ delay: 17, x: 750, drift: -26, color: "#EDB371", w: 9, h: 11 },
|
||||
{ delay: 6, x: 850, drift: 15, color: "#B2ACD2", w: 12, h: 7 },
|
||||
{ delay: 11, x: 190, drift: 30, color: "#FDB1AF", w: 8, h: 9 },
|
||||
{ delay: 2, x: 695, drift: -12, color: "#3C5FAD", w: 11, h: 8 },
|
||||
{ delay: 19, x: 440, drift: 23, color: "#FBD387", w: 9, h: 10 },
|
||||
];
|
||||
const fallPeriod = Math.round(fps * 2.2);
|
||||
const getFall = (delay: number, startX: number, driftX: number) => {
|
||||
if (frame < delay) return { x: startX, y: -80, rotation: 0, opacity: 0 };
|
||||
const c = (frame - delay) % fallPeriod;
|
||||
const t = c / fallPeriod;
|
||||
return {
|
||||
x: startX + driftX * t + Math.sin(t * Math.PI * 5) * 13,
|
||||
y: -80 + 1100 * t,
|
||||
rotation: t * 540,
|
||||
opacity: interpolate(t, [0, 0.04, 0.82, 1], [0, 1, 0.88, 0], {
|
||||
extrapolateLeft: "clamp", extrapolateRight: "clamp",
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body — from blackcelebrate.svg filter0 */}
|
||||
<filter id={p("f0")} x="90.3867" y="238.634" width="765.268" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="17" dy="28"/><feGaussianBlur stdDeviation="10.45"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-27" dy="-22"/><feGaussianBlur stdDeviation="29.75"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Head circle — from blackcelebrate.svg filter1 */}
|
||||
<filter id={p("f1")} x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="9" dy="2"/><feGaussianBlur stdDeviation="5.65"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-13"/><feGaussianBlur stdDeviation="19.7"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadows — filter2, filter3 */}
|
||||
<filter id={p("f2")} x="423.502" y="239.5" width="153.771" height="66.8599" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.977" y="217.947" width="123.537" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
|
||||
{/* Left arm — from blackcelebrate.svg filter4 */}
|
||||
<filter id={p("f4")} x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlights — filter5, filter6 */}
|
||||
<filter id={p("f5")} x="366.18" y="492.2" width="15.6332" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
<filter id={p("f6")} x="618.198" y="495.2" width="15.6332" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
|
||||
{/* Raised right arm — from blackcelebrate.svg filter7 */}
|
||||
<filter id={p("f7")} x="509.092" y="615.765" width="249.912" height="175.404" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Falling confetti rain */}
|
||||
{fallingDefs.map((cd, i) => {
|
||||
const ft = getFall(cd.delay, cd.x, cd.drift);
|
||||
return (
|
||||
<rect key={i}
|
||||
x={-cd.w / 2} y={-cd.h / 2} width={cd.w} height={cd.h}
|
||||
fill={cd.color} opacity={ft.opacity}
|
||||
transform={`translate(${ft.x}, ${ft.y}) rotate(${ft.rotation})`}
|
||||
rx={2}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Cone hat cluster — tracks head drift, wobbles at base */}
|
||||
<g transform={`translate(${headDx}, ${headDy}) rotate(${hatWobble}, 563, 259)`}>
|
||||
<path d="M818.443 81.8261C801.239 163.792 767.688 278.904 745.504 387.001C745.504 387.001 651.114 341.359 563.617 259.448C563.617 259.448 749.934 128.161 818.443 81.8261Z" fill="#3C5FAD"/>
|
||||
<path d="M776.069 110.778C776.904 115.24 779.25 120.197 785.098 124.346C792.995 130.063 801.688 130.097 807.744 129.145C811.753 112.391 815.424 96.503 818.455 81.794C807.363 89.2476 792.707 99.3421 776.069 110.778Z" fill="#2F5798"/>
|
||||
<path d="M810.025 108.393C810.025 108.393 800.685 112.573 796.557 106.669C792.426 100.764 798.818 93.0966 798.818 93.0966C798.818 93.0966 790.198 89.4892 791.395 80.2751C792.584 71.0644 804.074 75.3959 804.074 75.3959C804.074 75.3959 804.021 67.853 809.066 67.2188C814.111 66.5877 817.447 72.5929 818.504 76.0397C818.504 76.0397 827.482 74.3201 830.394 79.0537C833.305 83.7944 831.201 91.7364 827.06 94.5907C827.06 94.5907 832.627 107.78 823.656 112.149C814.685 116.52 810.025 108.393 810.025 108.393Z" fill="#224E82"/>
|
||||
<path d="M820.169 104.335C820.169 104.335 813.437 109.679 808.907 105.688C804.375 101.698 808.023 94.1001 808.023 94.1001C808.023 94.1001 800.312 92.9147 799.436 85.115C798.555 77.32 808.737 78.513 808.737 78.513C808.737 78.513 807.185 72.3384 811.149 70.7839C815.113 69.2315 819.018 73.4639 820.568 76.0748C820.568 76.0748 827.499 72.8183 830.81 76.1032C834.118 79.3869 834.005 86.3279 831.22 89.5201C831.22 89.5201 838.373 99.1832 831.976 104.611C825.578 110.038 820.169 104.335 820.169 104.335Z" fill="#3C5FAD"/>
|
||||
<path d="M751.792 127.644C752.238 128.874 753.011 129.931 754.062 130.879C757.709 134.177 763.344 133.812 766.64 130.168C769.822 126.541 769.613 121.117 766.082 117.8C761.4 120.967 756.62 124.272 751.792 127.644Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M764.22 162.014C770.514 154.948 781.344 154.323 788.408 160.618C795.473 166.912 796.099 177.741 789.804 184.808C783.51 191.873 772.679 192.498 765.613 186.202C758.549 179.909 757.925 169.08 764.22 162.014Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M750.763 204.948C754.444 208.23 754.772 213.875 751.489 217.56C748.207 221.243 742.56 221.571 738.877 218.288C735.193 215.006 734.867 209.359 738.149 205.676C741.433 201.992 747.077 201.667 750.763 204.948Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M764.855 260.782C767.308 263.332 770.36 264.89 773.556 265.535C776.29 254.39 779.094 243.291 781.821 232.443C776.063 230.692 769.643 232.019 765.011 236.543C758.367 243.191 758.256 254.069 764.855 260.782Z" fill="#929ED3"/>
|
||||
<path d="M735.625 275.432C739.307 278.713 739.634 284.36 736.352 288.045C733.07 291.728 727.424 292.054 723.739 288.772C720.057 285.49 719.73 279.843 723.012 276.159C726.295 272.476 731.94 272.15 735.625 275.432Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M741.625 343.413C745.115 346.498 749.525 348.005 753.92 347.674C756.32 337.001 758.835 326.307 761.303 315.681C754.481 311.855 745.676 313.115 740.242 319.2C733.974 326.319 734.623 337.126 741.625 343.413Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M681.283 176.828C681.766 177.575 682.346 178.19 683.041 178.783C686.877 181.811 692.568 181.081 695.528 177.196C698.008 173.985 697.996 169.716 695.812 166.644C690.938 170.084 686.111 173.456 681.283 176.828Z" fill="#929ED3"/>
|
||||
<path d="M685.942 199.483C692.236 192.417 703.067 191.792 710.132 198.087C717.196 204.381 717.822 215.211 711.527 222.276C705.233 229.341 694.403 229.967 687.338 223.672C680.272 217.377 679.648 206.547 685.942 199.483Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M675.965 242.337C679.647 245.619 679.974 251.265 676.691 254.949C673.409 258.633 667.763 258.96 664.079 255.677C660.396 252.395 660.07 246.749 663.352 243.065C666.635 239.381 672.281 239.055 675.965 242.337Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M659.833 286.525C666.127 279.46 676.957 278.835 684.022 285.13C691.086 291.424 691.711 302.252 685.417 309.319C679.123 316.384 668.293 317.01 661.228 310.714C654.163 304.421 653.538 293.591 659.833 286.525Z" fill="#929ED3"/>
|
||||
<path d="M605.399 230.008L605.352 230.075C603.265 236.303 605.009 243.426 610.197 248.122C617.2 254.409 628.075 253.809 634.344 246.691C640.679 239.621 640.031 228.814 632.961 222.477C629.826 219.746 626.032 218.372 622.204 218.193L622.157 218.26C616.275 222.405 610.603 226.395 605.399 230.008Z" fill="#929ED3"/>
|
||||
<path d="M563.619 259.449C558.053 268.439 593.742 304.142 643.272 339.289C692.802 374.437 738.287 396.336 744.935 388.114C751.664 379.792 716.143 343.852 665.524 307.932C614.905 272.01 569.253 250.349 563.619 259.449Z" fill="#224E82"/>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm — waves enthusiastically */}
|
||||
<g transform={`rotate(${leftArmAngle}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Cone horn in hand + raised right arm — wave together */}
|
||||
<g transform={`rotate(${hornWave}, 548, 683)`}>
|
||||
{/* Horn cone */}
|
||||
<path d="M571.064 750.197C527.336 735.487 466.533 709.691 408.833 690.568C408.833 690.568 439.903 641.882 490.369 599.312C490.369 599.312 550.145 709.724 571.064 750.197Z" fill="#3C5FAD"/>
|
||||
<path d="M557.964 725.146C555.469 725.314 552.606 726.277 549.958 729.208C546.32 733.159 545.74 737.912 545.869 741.287C554.775 744.562 563.229 747.598 571.08 750.207C567.72 743.657 563.145 734.987 557.964 725.146Z" fill="#2F5798"/>
|
||||
<path d="M557.073 743.876C557.073 743.876 555.39 738.496 558.887 736.62C562.384 734.742 566.165 738.734 566.165 738.734C566.165 738.734 568.696 734.252 573.659 735.502C578.621 736.748 575.509 742.754 575.509 742.754C575.509 742.754 579.639 743.212 579.659 746.013C579.679 748.814 576.178 750.251 574.224 750.606C574.224 750.606 574.584 755.629 571.806 756.915C569.025 758.202 564.816 756.537 563.522 754.088C563.522 754.088 555.947 756.28 554.137 751.09C552.326 745.9 557.073 743.876 557.073 743.876Z" fill="#224E82"/>
|
||||
<path d="M558.637 749.688C558.637 749.688 556.149 745.66 558.624 743.44C561.1 741.219 565.021 743.705 565.021 743.705C565.021 743.705 566.168 739.564 570.491 739.589C574.813 739.611 573.502 745.104 573.502 745.104C573.502 745.104 576.98 744.654 577.574 746.923C578.167 749.192 575.599 751.055 574.071 751.733C574.071 751.733 575.404 755.735 573.393 757.334C571.383 758.932 567.593 758.422 566.027 756.691C566.027 756.691 560.278 759.98 557.723 756.129C555.167 752.279 558.637 749.688 558.637 749.688Z" fill="#3C5FAD"/>
|
||||
{/* Sparkle circles from horn */}
|
||||
<path d="M550.306 710.775C549.604 710.939 548.976 711.294 548.39 711.808C546.35 713.59 546.185 716.696 547.966 718.734C549.744 720.71 552.724 720.946 554.767 719.229C553.337 716.463 551.838 713.634 550.306 710.775Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M530.702 715.352C534.16 719.252 533.802 725.217 529.902 728.675C526.002 732.133 520.038 731.775 516.579 727.874C513.121 723.974 513.479 718.009 517.38 714.551C521.279 711.093 527.243 711.452 530.702 715.352Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M508.084 705.215C506.051 707.016 502.941 706.831 501.138 704.797C499.335 702.763 499.521 699.653 501.555 697.85C503.588 696.047 506.699 696.234 508.501 698.267C510.304 700.302 510.118 703.41 508.084 705.215Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M476.629 709.313C475.076 710.49 474.026 712.059 473.467 713.766C479.387 715.982 485.278 718.233 491.036 720.426C492.366 717.389 492.055 713.792 489.879 710.965C486.672 706.901 480.728 706.137 476.629 709.313Z" fill="#929ED3"/>
|
||||
<path d="M470.504 692.378C468.471 694.18 465.361 693.993 463.557 691.96C461.755 689.927 461.941 686.817 463.975 685.013C466.008 683.211 469.119 683.397 470.922 685.431C472.724 687.465 472.538 690.574 470.504 692.378Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M432.928 691.263C431.015 692.973 429.905 695.288 429.803 697.714C435.486 699.717 441.173 701.784 446.827 703.821C449.361 700.336 449.241 695.438 446.263 692.072C442.774 688.183 436.82 687.839 432.928 691.263Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M527.959 669.023C527.519 669.239 527.145 669.517 526.776 669.858C524.871 671.762 524.903 674.922 526.837 676.792C528.433 678.356 530.769 678.626 532.591 677.63C531.024 674.741 529.492 671.882 527.959 669.023Z" fill="#929ED3"/>
|
||||
<path d="M515.264 670.107C518.723 674.007 518.364 679.972 514.464 683.43C510.564 686.888 504.6 686.53 501.141 682.63C497.683 678.73 498.041 672.765 501.941 669.307C505.842 665.848 511.807 666.207 515.264 670.107Z" fill="#929ED3"/>
|
||||
<path opacity="0.5" d="M492.467 661.879C490.434 663.681 487.324 663.495 485.521 661.461C483.718 659.427 483.904 656.317 485.938 654.514C487.971 652.711 491.081 652.898 492.884 654.932C494.687 656.966 494.501 660.075 492.467 661.879Z" fill="#929ED3"/>
|
||||
<path opacity="0.25" d="M469.335 650.196C472.793 654.096 472.435 660.061 468.534 663.519C464.635 666.976 458.671 666.618 455.212 662.718C451.754 658.819 452.111 652.854 456.012 649.396C459.912 645.938 465.876 646.296 469.335 650.196Z" fill="#929ED3"/>
|
||||
<path d="M503.771 624.073L503.738 624.043C500.465 622.499 496.456 622.992 493.552 625.527C489.66 628.951 489.285 634.939 492.774 638.829C496.232 642.751 502.186 643.095 506.109 639.637C507.806 638.099 508.803 636.112 509.148 634.03L509.115 634C507.227 630.514 505.411 627.153 503.771 624.073Z" fill="#929ED3"/>
|
||||
{/* Horn base / tube connecting to arm */}
|
||||
<path d="M490.368 599.312C485.81 595.686 463.971 612.902 441.542 637.725C419.113 662.548 404.193 686.015 408.261 690.184C412.378 694.403 434.335 677.295 457.258 651.925C480.181 626.556 494.982 602.982 490.368 599.312Z" fill="#224E82"/>
|
||||
{/* Raised right arm */}
|
||||
<path
|
||||
d="M547.874 682.74C579.045 659.33 586.583 655.887 601.342 636.903C614.199 620.365 687.112 641.073 744.533 659.742C755.416 663.28 758.566 677.425 750.4 685.441C715.581 719.619 656.534 777.365 608.104 784.811C502.626 801.031 488.71 729.92 547.874 682.74Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f7")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Scattered party confetti pieces */}
|
||||
<g opacity={sp(0)}>
|
||||
<path d="M401.506 547.833C391.912 543.314 402.328 534.613 407.482 532.844C410.069 531.473 417.556 529.608 420.34 530.617C427.912 533.359 433.372 541.694 420.76 542.143C418.28 542.227 415.718 542.605 413.427 543.375C412.483 545.035 411.528 546.979 410.16 548.255C406.605 550.346 404.982 549.631 401.506 547.833Z" fill="#97A5AD"/>
|
||||
<path d="M401.506 547.833C391.912 543.314 402.328 534.613 407.482 532.844L407.847 533.099C405.495 534.713 400.035 537.848 398.994 540.545C401.575 540.715 403.27 538.591 404.398 540.254C405.956 542.553 407.233 544.645 407.275 547.412C408.047 547.789 407.624 547.702 408.609 547.484C410.292 545.63 408.317 542.939 409.241 541.103C410.138 542.423 409.936 545.91 409.418 547.496L410.16 548.255C406.605 550.346 404.982 549.631 401.506 547.833Z" fill="#98C285"/>
|
||||
<path d="M401.504 547.832C404.768 547.762 406.221 549.665 409.416 547.495L410.158 548.254C406.603 550.346 404.979 549.631 401.504 547.832Z" fill="#688566"/>
|
||||
<path d="M306.378 437.477C306.524 433.31 310.128 428.971 314.373 429.157C319.028 429.361 321.542 437.818 323.484 441.049C324.663 443.01 326.452 445.025 328.009 446.869C329.642 450.997 324.854 453.673 321.338 454.191C314.948 451.285 314.274 446.575 310.676 441.164C310.197 440.443 307.382 438.539 306.378 437.477Z" fill="#B2ACD2"/>
|
||||
<path d="M368.322 474.087C368.888 470.483 373.216 468.81 376.146 467.301C381.661 470.134 387.353 475.835 390.538 481.197C392.175 487.077 384.637 488.518 381.037 486.824C377.149 484.995 369.947 477.992 368.322 474.087Z" fill="#B2ACD2"/>
|
||||
</g>
|
||||
<g opacity={sp(1.3)}>
|
||||
<path d="M409.095 631.215C410.497 629.366 415.812 627.851 418.053 626.212C422.838 622.715 424.65 612.655 431.309 620.221C433.023 622.169 434.169 622.421 435.074 625.263C432.846 629.122 429.964 631.511 426.649 634.361C422.364 638.045 420.481 639.43 414.761 639.882C412.266 637.181 410.207 634.726 409.095 631.215Z" fill="#F5A29A"/>
|
||||
<path d="M309.546 617.796C309.833 616.58 312.875 614.925 313.922 614.27C317.892 611.788 321.568 609.069 323.539 604.682C324.081 603.475 326.758 601.104 328.259 601.937C330.597 603.236 333.588 606.401 334.736 608.788C333.562 613.468 324.727 620.454 320.804 623.494C315.451 627.642 312.31 621.992 309.546 617.796Z" fill="#FBD387"/>
|
||||
<path d="M248.286 549.421C249.416 545.603 254.004 543.643 257.533 542.812C261.182 545.59 263.157 550.492 265.696 554.302C267.14 556.469 268.448 558.298 270.006 560.4C270.092 560.84 270.019 560.968 269.957 561.441C268.081 563.648 262.903 567.2 259.897 566.365C255.318 565.095 255.167 558.045 252.706 554.704C251.252 552.731 249.64 551.524 248.286 549.421Z" fill="#B1D37E"/>
|
||||
<path d="M242.687 447.248C245.23 444.351 247.288 441.309 251.418 441.032C252.393 440.972 253.37 440.946 254.347 440.953L256.022 443.44C258.327 446.9 261.224 449.042 263.025 452.859C261.308 455.396 259.899 456.985 257.553 458.964C254.966 459.723 251.158 455.629 249.255 453.946C246.101 451.483 244.977 450.488 242.687 447.248Z" fill="#B1D37E"/>
|
||||
<path d="M249.252 453.947L249.339 453.369C249.692 453.411 256.864 458.378 257.55 458.964C254.963 459.724 251.155 455.63 249.252 453.947Z" fill="#98C285"/>
|
||||
</g>
|
||||
<g opacity={sp(2.6)}>
|
||||
<path d="M191.999 494.252C192.342 493.499 192.787 492.892 193.617 492.654C199.679 490.921 205.781 489.724 211.67 487.348C212.532 487 214.465 486.307 215.243 486.946C217.435 488.744 218.268 492.03 218.776 494.718C218.605 495.571 218.401 496.605 217.438 496.965C211.042 499.352 202.808 502.926 195.96 502.316C194.267 502.165 192.505 495.81 191.999 494.252Z" fill="#FBD387"/>
|
||||
<path d="M379.775 577.889C375.911 578.788 370.931 574.408 368.347 571.695C367.566 570.875 367.777 570.276 367.884 569.289C370.168 565.842 372.553 563.994 376.713 563.072C380.412 568.187 383.662 568.086 386.413 572.23C384.357 575.079 383.316 577.08 379.775 577.889Z" fill="#B1D37E"/>
|
||||
<path d="M379.775 577.889C375.911 578.788 370.931 574.408 368.347 571.695C367.566 570.875 367.777 570.276 367.884 569.289L368.243 569.719C368.573 570.12 368.658 570.392 368.894 570.709C370.992 573.53 374.373 575.732 377.53 577.212C378.274 577.56 379.035 577.371 379.775 577.889Z" fill="#98C285"/>
|
||||
<path d="M412.547 493.592C413.187 491.992 416.543 485.138 418.641 485.516C422.954 486.294 423.625 492.78 427.023 495.835C428.085 496.887 428.939 497.945 429.895 499.089C428.572 500.115 426.937 501.621 425.643 502.748C419.068 499.589 416.999 500.356 412.547 493.592Z" fill="#EDB371"/>
|
||||
<path d="M357.445 512.642C358.505 509.193 361.943 507.245 365.081 505.969C367.904 507.692 369.452 508.879 371.715 511.304L371.861 512.171C371.321 513.598 370.566 514.85 369.347 515.806C367.847 516.968 365.931 517.454 364.059 517.149C361.185 516.682 359.116 514.873 357.445 512.642Z" fill="#B1D37E"/>
|
||||
</g>
|
||||
<g opacity={sp(3.9)}>
|
||||
<path d="M361.561 562.932C355.079 554.539 348.83 566.587 348.215 572.001C347.434 574.823 347.229 582.536 348.815 585.037C353.127 591.839 362.443 595.372 360.16 582.961C359.707 580.52 359.523 577.937 359.781 575.534C361.198 574.255 362.89 572.902 363.841 571.291C365.116 567.369 364.067 565.938 361.561 562.932Z" fill="#97A5AD"/>
|
||||
<path d="M361.561 562.932C355.079 554.539 348.83 566.587 348.215 572.001L348.542 572.302C349.612 569.658 351.495 563.65 353.903 562.052C354.626 564.535 352.917 566.648 354.786 567.391C357.366 568.416 359.685 569.212 362.395 568.656C362.93 569.328 362.754 568.934 362.754 569.942C361.307 571.986 358.253 570.638 356.659 571.936C358.142 572.528 361.503 571.578 362.94 570.73L363.841 571.291C365.116 567.369 364.067 565.938 361.561 562.932Z" fill="#98C285"/>
|
||||
<path d="M444.614 552.352C443.112 554.12 442.778 559.637 441.662 562.179C439.28 567.605 429.848 571.545 438.673 576.415C440.944 577.668 441.438 578.733 444.408 579.003C447.695 575.995 449.406 572.666 451.474 568.814C454.147 563.834 455.092 561.697 454.299 556.015C451.124 554.162 448.283 552.68 444.614 552.352Z" fill="#F5A29A"/>
|
||||
<path d="M233.278 493.859C229.241 494.902 225.781 499.356 226.879 503.462C228.083 507.963 236.883 508.593 240.457 509.792C242.626 510.52 244.979 511.833 247.116 512.954C251.5 513.659 253.079 508.406 252.826 504.86C248.609 499.249 243.865 499.607 237.806 497.261C236.998 496.949 234.531 494.61 233.278 493.859Z" fill="#B2ACD2"/>
|
||||
<path d="M410.034 458.045C408.909 458.587 407.949 461.914 407.536 463.078C405.969 467.49 404.107 471.667 400.249 474.537C399.187 475.328 397.449 478.453 398.587 479.739C400.359 481.742 404.095 483.978 406.674 484.585C410.99 482.428 415.905 472.294 418.027 467.808C420.922 461.686 414.728 459.838 410.034 458.045Z" fill="#FBD387"/>
|
||||
</g>
|
||||
<g opacity={sp(5.2)}>
|
||||
<path d="M330.05 412.978C326.566 414.905 325.642 419.809 325.592 423.433C329.092 426.397 334.305 427.268 338.573 428.925C341.001 429.867 343.069 430.75 345.457 431.817C345.906 431.807 346.015 431.707 346.463 431.545C348.213 429.237 350.564 423.415 349.101 420.659C346.873 416.462 339.956 417.836 336.163 416.154C333.923 415.16 332.396 413.846 330.05 412.978Z" fill="#B1D37E"/>
|
||||
<path d="M264.034 369.923C263.373 370.42 262.876 370.986 262.823 371.848C262.439 378.141 262.587 384.357 261.537 390.62C261.384 391.537 261.124 393.574 261.916 394.195C264.145 395.948 267.532 396.052 270.268 395.969C271.063 395.617 272.029 395.195 272.172 394.177C273.124 387.417 274.836 378.606 272.763 372.05C272.25 370.43 265.665 370.081 264.034 369.923Z" fill="#FBD387"/>
|
||||
<path d="M282.391 546.442C278.994 547.772 278.294 552.359 277.453 555.546C281.409 560.319 288.204 564.648 294.127 566.601C300.222 566.93 300.003 559.259 297.572 556.11C294.946 552.708 286.555 547.186 282.391 546.442Z" fill="#B2ACD2"/>
|
||||
<path d="M229.074 429.557C226.795 432.665 224.268 435.332 224.889 439.423C225.041 440.389 225.226 441.349 225.444 442.301L228.233 443.4C232.11 444.904 234.827 447.27 238.943 448.206C241.049 445.981 242.296 444.263 243.722 441.545C243.906 438.855 239.086 436.02 237.032 434.525C233.947 431.977 232.733 431.095 229.074 429.557Z" fill="#B1D37E"/>
|
||||
<path d="M177.032 413.753C173.749 415.998 171.978 421.449 171.769 425.3C175.607 428.243 178.544 428.991 183.228 429.99C183.908 430.138 184.204 430.094 184.896 430.078C186.016 429.268 187.138 427.406 187.695 426.158C190.522 419.83 182.07 415.248 177.032 413.753Z" fill="#FDB1AF"/>
|
||||
<path d="M216.024 399.838C217.507 396.148 222.448 393.242 226.163 392.208C229.864 395.32 231.229 398.026 233.215 402.385C233.506 403.016 233.527 403.316 233.661 403.995C233.112 405.262 231.535 406.76 230.437 407.574C224.868 411.699 218.57 404.435 216.024 399.838Z" fill="#FDB1AF"/>
|
||||
<path d="M386.218 535.227C386.263 531.26 380.912 527.342 377.704 525.404C376.736 524.819 376.196 525.154 375.256 525.471C372.383 528.446 371.092 531.173 371.089 535.434C376.882 537.942 377.485 541.138 382.125 542.929C384.463 540.307 386.193 538.858 386.218 535.227Z" fill="#B1D37E"/>
|
||||
<path d="M310.979 585.415C309.555 586.386 303.586 591.141 304.409 593.109C306.099 597.152 312.577 596.407 316.293 599.066C317.55 599.877 318.767 600.482 320.09 601.169C320.806 599.655 321.924 597.734 322.746 596.227C318.242 590.489 318.544 588.303 310.979 585.415Z" fill="#EDB371"/>
|
||||
<path d="M317.691 527.501C314.551 529.281 313.392 533.058 312.822 536.398C315.114 538.782 316.607 540.038 319.464 541.724L320.341 541.679C321.618 540.845 322.678 539.837 323.349 538.441C324.159 536.725 324.221 534.75 323.519 532.987C322.442 530.282 320.23 528.652 317.691 527.501Z" fill="#B1D37E"/>
|
||||
</g>
|
||||
|
||||
{/* Head group: drift + squash */}
|
||||
<g transform={
|
||||
`translate(${headDx}, ${headDy}) ` +
|
||||
`translate(493, 145) scale(${headSquashX}, ${headSquashY}) translate(-493, -145)`
|
||||
}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100"/>
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`}/>
|
||||
|
||||
{/* Happy ^^ eyes */}
|
||||
<path d="M435.949 461.78C435.954 465.065 432.454 467.564 429.038 466.431C426.954 465.064 426.504 462.935 424.993 460.722C418.083 450.594 409.393 449.424 398.327 453.628C392.687 457.592 392.525 458.972 388.842 464.9C379.035 471.83 374.99 451.985 396.269 443.479C404.339 440.327 413.33 440.509 421.267 443.978C428.827 447.378 434.406 453.5 435.949 461.78Z" fill="#1C170B"/>
|
||||
<path d="M618.68 468.507C618.684 471.792 615.184 474.291 611.768 473.157C609.684 471.791 609.234 469.661 607.724 467.449C600.813 457.321 592.124 456.15 581.058 460.355C575.417 464.318 575.255 465.698 571.572 471.627C561.765 478.556 557.721 458.712 579 450.206C587.07 447.053 596.06 447.236 603.998 450.705C611.557 454.104 617.137 460.226 618.68 468.507Z" fill="#1C170B"/>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0"/>
|
||||
<g filter={`url(#${p("f5")})`}>
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.144 494.285C641.875 485.407 671.146 495.187 664.859 516.522C657.949 539.968 605.952 533.98 615.074 505.471C615.729 503.36 618.569 499.408 620.25 497.867C621.586 496.68 624.464 495.224 626.144 494.285Z" fill="#EF928B"/>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M632.012 497C626.769 497.048 619.649 501.673 620.012 507C624.18 507.091 632.486 501.087 632.012 497Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Open mouth + tongue */}
|
||||
<path d="M526.559 506.037C529.118 505.857 530.578 506.352 532.949 507.18C540.011 509.647 541.161 518.064 538.561 524.272C535.04 532.678 527.164 538.441 518.947 541.959C504.589 548.106 488.023 546.785 473.761 541.057C468.46 538.97 460.68 534.705 459.795 528.638C455.511 499.213 487.412 516.413 501.358 514.55C509.779 513.426 518.469 508.037 526.559 506.037Z" fill="black"/>
|
||||
<path d="M514.571 529.318C521.129 529.165 521.058 531.475 521.47 537.347C509.407 544.777 496.626 543.843 483.423 541.737C481.545 541.195 480.599 541.096 479.149 539.785C473.781 523.686 495.949 536.217 500.65 535.608C504.12 535.159 510.898 531.045 514.571 529.318Z" fill="#E06B51"/>
|
||||
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,364 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
Easing,
|
||||
interpolate,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
|
||||
export const BlackMascotCrying: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmcry-${k}`;
|
||||
|
||||
// ── Cry transition ─────────────────────────────────────────────────────────
|
||||
const cryProgress = interpolate(frame, [60, 90], [0, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
easing: Easing.inOut(Easing.cubic),
|
||||
});
|
||||
const normalFaceOpacity = 1 - cryProgress;
|
||||
const cryFaceOpacity = cryProgress;
|
||||
|
||||
// ── Body bob — calm idle blends into faster sob shudder ───────────────────
|
||||
const idleBob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
const sobBob =
|
||||
Math.sin((frame / fps) * Math.PI * 2.8) * 10 +
|
||||
Math.sin((frame / fps) * Math.PI * 5.5 + 0.7) * 3;
|
||||
const bob = idleBob * (1 - cryProgress) + sobBob * cryProgress;
|
||||
|
||||
// ── Head drift + squash ───────────────────────────────────────────────────
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const driftScale = 1 - cryProgress * 0.65;
|
||||
const headDx = Math.sin(dotPhase * 0.7) * 6 * driftScale;
|
||||
const headDy = Math.sin(dotPhase) * 9 * driftScale;
|
||||
const press = Math.max(0, Math.sin(dotPhase)) * driftScale;
|
||||
const headSquashY = 1 - 0.08 * press;
|
||||
const headSquashX = 1 + 0.05 * press;
|
||||
|
||||
// ── Arms — gentle idle sway, droop down when crying ──────────────────────
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.3) * 7;
|
||||
const rightSway = Math.sin((frame / fps) * Math.PI * 1.3 + 1.0) * 6;
|
||||
const leftArmAngle = leftSway + cryProgress * 14;
|
||||
const rightArmAngle = rightSway + cryProgress * 14;
|
||||
|
||||
// ── Blink — only during idle phase ───────────────────────────────────────
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = cryProgress < 0.15 && (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScaleNormal = inBlink ? 0.12 : 1;
|
||||
|
||||
// ── Cheeks — flush more as crying intensifies ─────────────────────────────
|
||||
const cheekOpacity =
|
||||
0.82 + cryProgress * 0.16 + Math.sin((frame / fps) * Math.PI * 1.1) * 0.05;
|
||||
|
||||
// ── Tears ─────────────────────────────────────────────────────────────────
|
||||
const tearPeriod = Math.round(fps * 1.6);
|
||||
const getTear = (delayFrames: number, eyeX: number, eyeStartY: number) => {
|
||||
const startAt = 90 + delayFrames;
|
||||
if (frame < startAt) return { x: eyeX, y: eyeStartY, opacity: 0 };
|
||||
const cycleFrame = (frame - startAt) % tearPeriod;
|
||||
const t = cycleFrame / tearPeriod;
|
||||
const y = eyeStartY + t * 170;
|
||||
const opacity =
|
||||
interpolate(t, [0, 0.07, 0.68, 1.0], [0, 0.9, 0.75, 0], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
}) * cryProgress;
|
||||
return { x: eyeX, y, opacity };
|
||||
};
|
||||
|
||||
const tL1 = getTear(0, 395, 485);
|
||||
const tL2 = getTear(Math.round(fps * 0.55), 408, 485);
|
||||
const tR1 = getTear(Math.round(fps * 0.22), 592, 485);
|
||||
const tR2 = getTear(Math.round(fps * 0.80), 603, 485);
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow */}
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body */}
|
||||
<filter id={p("f0")} x="90.3857" y="238.634" width="765.268" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="17" dy="28"/><feGaussianBlur stdDeviation="10.45"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-27" dy="-22"/><feGaussianBlur stdDeviation="29.75"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Head circle */}
|
||||
<filter id={p("f1")} x="379" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="9" dy="2"/><feGaussianBlur stdDeviation="5.65"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-13"/><feGaussianBlur stdDeviation="19.7"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<filter id={p("f2")} x="423.5" y="239.5" width="153.771" height="66.8604" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.976" y="217.946" width="123.537" height="57.3711" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
|
||||
{/* Left arm */}
|
||||
<filter id={p("f4")} x="138.458" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Right arm */}
|
||||
<filter id={p("f5")} x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Normal left eye highlights */}
|
||||
<filter id={p("f6")} x="390.218" y="433.891" width="25.0343" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.65"/>
|
||||
</filter>
|
||||
<filter id={p("f7")} x="390.3" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Normal right eye highlights */}
|
||||
<filter id={p("f8")} x="570.859" y="435.358" width="27.0395" height="29.1125" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.95"/>
|
||||
</filter>
|
||||
<filter id={p("f9")} x="571.3" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
<filter id={p("f10")} x="574.668" y="440.492" width="10.9676" height="13.0943" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlights */}
|
||||
<filter id={p("f11")} x="366.181" y="492.2" width="15.6325" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
<filter id={p("f12")} x="618.2" y="495.2" width="15.6325" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse
|
||||
cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.548 382.714C175.869 479.647 86.1402 654.573 127.915 829.517C145.272 881.371 165.202 911.976 222.935 941.975C253.337 957.772 327.5 950.5 375.544 921.664L445.394 890.456C490.742 873.851 509.572 876.412 538.5 889.192C577.029 910.413 587.5 931.5 649.207 964.222C729.487 1006.79 793.127 956.041 817.514 889.192C874.808 742.915 814.514 422.978 650.331 310.479C516.054 226.594 403.003 247.226 270.548 382.714Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm */}
|
||||
<g transform={`rotate(${leftArmAngle}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.7 773.068C271.729 736.698 272.987 728.506 287.23 709.133C299.638 692.255 259.842 627.746 226.232 577.586C219.862 568.08 205.393 568.903 199.906 578.945C176.511 621.76 137.044 694.31 143.077 742.936C156.218 848.842 228.429 842.851 257.7 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Right arm */}
|
||||
<g transform={`rotate(${rightArmAngle}, 712, 578)`}>
|
||||
<path
|
||||
d="M680.851 773.156C666.823 736.786 665.565 728.594 651.321 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.689 568.167 733.158 568.991 738.645 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.333 848.93 710.122 842.939 680.851 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f5")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Tears */}
|
||||
{[tL1, tL2, tR1, tR2].map((t, i) => (
|
||||
<g key={i} transform={`translate(${t.x}, ${t.y})`} opacity={t.opacity}>
|
||||
<path
|
||||
d="M-5,0 A5,5,0,0,1,5,0 Q5,10 0,18 Q-5,10 -5,0 Z"
|
||||
fill="#7EC8F0"
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
|
||||
{/* Head group: drift + squash */}
|
||||
<g transform={
|
||||
`translate(${headDx}, ${headDy}) ` +
|
||||
`translate(493, 145) scale(${headSquashX}, ${headSquashY}) translate(-493, -145)`
|
||||
}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.376 270.172C464.042 264.005 502.076 255.372 544.876 270.172C598.376 288.672 415.876 288.172 450.376 270.172Z" fill="#030100"/>
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.5 245.499C524.956 248.602 489.943 257.335 463.186 249.888C429.74 240.578 555.068 236.442 533.5 245.499Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`}/>
|
||||
|
||||
{/* Normal eyes */}
|
||||
<g opacity={normalFaceOpacity}>
|
||||
{/* Left eye */}
|
||||
<g transform={`translate(411.48, 465) scale(1, ${eyeScaleNormal}) translate(-411.48, -465)`}>
|
||||
<path d="M411.48 428C419.679 428 423 432 424.408 434.321C431.456 442.807 434.448 450.812 435.286 461.939C436.531 478.451 428.581 501.025 409.176 501.922C402.907 502.212 396.783 499.978 392.177 495.714C372.967 478.168 379.456 428.811 411.48 428Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M402.589 435.31C405.113 435.115 406.119 435.015 408.226 436.218C409.449 437.699 409.295 438.305 409.367 440.116C410.18 440.625 410.898 441.111 411.694 441.647L411.904 442.956C419.014 456.194 406.034 468.295 397.004 457.028C387.109 457.791 393.027 445.603 396.045 441.344C398.038 438.531 399.869 437.302 402.589 435.31Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M402.405 435.12C405.005 434.923 406.041 434.822 408.211 436.033C409.471 437.522 409.312 438.132 409.386 439.954C410.224 440.465 410.964 440.954 411.784 441.493L412 442.811C408.557 441.118 406.625 439.187 402.54 440.654C395.773 443.086 394.268 451.112 396.652 456.966C386.459 457.733 392.555 445.473 395.664 441.189C397.717 438.36 399.602 437.123 402.405 435.12Z" fill="#3A372F"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right eye */}
|
||||
<g transform={`translate(589.37, 465) scale(1, ${eyeScaleNormal}) translate(-589.37, -465)`}>
|
||||
<path d="M589.37 428.706C621.867 428.523 630.994 493.598 594.352 502.663C555.686 504.419 554.456 433.119 589.37 428.706Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f8")})`}>
|
||||
<path d="M576.491 452.759C577.097 454.049 577.14 454.759 576.609 455.979C569.334 454.164 573.452 439.586 580.007 437.664C584.2 436.436 587.824 438.013 589.306 442.115C592.619 444.137 594.847 446.01 595.749 450.049C596.355 452.791 595.845 455.661 594.331 458.027C589.038 466.354 580.303 462.46 578.515 452.619C577.656 451.775 577.93 451.624 577.758 450.079L577.591 450.499L577.887 450.8L577.387 452.615L576.491 452.759Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f9")})`}>
|
||||
<path d="M576.06 452.732C576.72 454.041 576.766 454.762 576.188 456C568.275 454.158 572.754 439.363 579.885 437.413C584.446 436.166 588.388 437.766 590 441.93L585.246 442.04C580.159 445.421 579.418 446.592 578.261 452.59C577.327 451.734 577.625 451.58 577.438 450.013L577.257 450.438L577.578 450.743L577.035 452.586L576.06 452.732Z" fill="#312E24"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f10")})`}>
|
||||
<path d="M576.49 452.759L575.948 452.886L575.475 452.235C575.11 444.84 575.121 438.674 584.935 442.224C580.259 445.556 579.577 446.709 578.514 452.619C577.655 451.776 577.929 451.624 577.757 450.08L577.591 450.499L577.886 450.8L577.387 452.615L576.49 452.759Z" fill="#534639"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Crying eyes */}
|
||||
<g opacity={cryFaceOpacity}>
|
||||
<path
|
||||
d="M378.656 446.974L428.707 462.956C431.536 463.859 431.474 467.883 428.619 468.699L378.656 482.974"
|
||||
stroke="#1C170B"
|
||||
strokeWidth="7"
|
||||
strokeLinecap="round"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M620.887 447.7L570.836 463.683C568.007 464.586 568.069 468.61 570.924 469.425L620.887 483.7"
|
||||
stroke="#1C170B"
|
||||
strokeWidth="7"
|
||||
strokeLinecap="round"
|
||||
fill="none"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Cheeks */}
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0"/>
|
||||
<g filter={`url(#${p("f11")})`}>
|
||||
<path d="M368 494C373.244 494.048 380.363 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M626.146 494.285C641.877 485.407 671.147 495.187 664.86 516.522C657.951 539.968 605.954 533.98 615.075 505.471C615.73 503.36 618.571 499.408 620.251 497.866C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B"/>
|
||||
<g filter={`url(#${p("f12")})`}>
|
||||
<path d="M632.013 497C626.77 497.048 619.65 501.673 620.013 507C624.181 507.091 632.487 501.087 632.013 497Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Normal smile */}
|
||||
<g opacity={normalFaceOpacity}>
|
||||
<path d="M471.504 494.784C471.5 491.499 475 489 478.416 490.134C480.5 491.5 480.95 493.63 482.461 495.842C489.371 505.97 498.06 507.141 509.126 502.936C514.767 498.973 514.929 497.593 518.612 491.664C528.419 484.735 532.464 504.579 511.184 513.085C503.114 516.238 494.124 516.055 486.187 512.586C478.627 509.187 473.047 503.065 471.504 494.784Z" fill="#1C170B"/>
|
||||
<path d="M509.127 502.936C514.767 498.973 514.929 497.593 518.612 491.664L520.234 492.572C521.198 496.986 512.309 506.706 507.958 505.884L507.711 505.234L509.127 502.936Z" fill="#312E24"/>
|
||||
</g>
|
||||
|
||||
{/* Sad frown */}
|
||||
<g opacity={cryFaceOpacity}>
|
||||
<path d="M524.086 523.541C524.09 526.826 520.59 529.325 517.175 528.191C515.09 526.825 514.641 524.696 513.13 522.483C506.22 512.355 497.53 511.184 486.464 515.389C480.823 519.352 480.661 520.732 476.978 526.661C467.172 533.591 463.127 513.746 484.406 505.24C492.476 502.088 501.467 502.27 509.404 505.739C516.964 509.138 522.543 515.26 524.086 523.541Z" fill="#1C170B"/>
|
||||
<path d="M486.463 515.389C480.823 519.352 480.661 520.733 476.978 526.661L475.356 525.754C474.392 521.339 483.281 511.62 487.631 512.441L487.879 513.091L486.463 515.389Z" fill="#312E24"/>
|
||||
</g>
|
||||
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,347 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
interpolate,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
|
||||
export const BlackMascotHatWithBag: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmhb-${k}`;
|
||||
|
||||
// ── Body bob ─────────────────────────────────────────────────────────────
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 10;
|
||||
|
||||
// ── Head drift + squash ─────────────────────────────────────────────────
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const headDx = Math.sin(dotPhase * 0.7) * 5;
|
||||
const headDy = Math.sin(dotPhase) * 7;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const headSquashY = 1 - 0.08 * press;
|
||||
const headSquashX = 1 + 0.05 * press;
|
||||
|
||||
// ── Left arm — gentle idle sway ─────────────────────────────────────────
|
||||
const leftArmAngle = Math.sin((frame / fps) * Math.PI * 0.8) * 8;
|
||||
|
||||
// ── Right arm — opposite phase ──────────────────────────────────────────
|
||||
const rightArmAngle = Math.sin((frame / fps) * Math.PI * 0.8 + Math.PI) * 8;
|
||||
|
||||
// ── Bag pendulum ────────────────────────────────────────────────────────
|
||||
const bagSwing = Math.sin((frame / fps) * Math.PI * 1.0 + 0.45) * 3;
|
||||
|
||||
// ── Blink ───────────────────────────────────────────────────────────────
|
||||
const blinkPeriod = Math.round(fps * 3.5);
|
||||
const blinkDur = Math.round(fps * 0.13);
|
||||
const blinkPhase = frame % blinkPeriod;
|
||||
const eyeScaleY =
|
||||
blinkPhase < blinkDur
|
||||
? interpolate(
|
||||
blinkPhase,
|
||||
[0, blinkDur * 0.35, blinkDur * 0.65, blinkDur],
|
||||
[1, 0.06, 0.06, 1],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
)
|
||||
: 1;
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body — from blackhatwithbag.svg filter0 */}
|
||||
<filter id={p("f0")} x="90.3848" y="238.634" width="765.268" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="17" dy="28"/><feGaussianBlur stdDeviation="10.45"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-27" dy="-22"/><feGaussianBlur stdDeviation="29.75"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Head circle — from blackhatwithbag.svg filter1 */}
|
||||
<filter id={p("f1")} x="379" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="9" dy="2"/><feGaussianBlur stdDeviation="5.65"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-13"/><feGaussianBlur stdDeviation="19.7"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadows — filter2, filter3 */}
|
||||
<filter id={p("f2")} x="423.5" y="239.5" width="153.771" height="66.8599" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.975" y="217.947" width="123.537" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
|
||||
{/* Left arm — from blackhatwithbag.svg filter4 */}
|
||||
<filter id={p("f4")} x="138.457" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlights — filter5, filter6 */}
|
||||
<filter id={p("f5")} x="390.218" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.65"/>
|
||||
</filter>
|
||||
<filter id={p("f6")} x="390.3" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlights — filter7, filter8, filter9 */}
|
||||
<filter id={p("f7")} x="570.858" y="435.358" width="27.0402" height="29.112" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.95"/>
|
||||
</filter>
|
||||
<filter id={p("f8")} x="571.3" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
<filter id={p("f9")} x="574.667" y="440.492" width="10.9684" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlights — filter10, filter11 */}
|
||||
<filter id={p("f10")} x="366.18" y="492.2" width="15.6332" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
<filter id={p("f11")} x="618.198" y="495.2" width="15.6332" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
|
||||
{/* Right arm — from blackhatwithbag.svg filter12 */}
|
||||
<filter id={p("f12")} x="644.998" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Hat shadow — filter13 */}
|
||||
<filter id={p("f13")} x="567.446" y="201.762" width="233.83" height="206.228" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="1.4"/>
|
||||
</filter>
|
||||
|
||||
{/* Hat buckle details — filter14, filter15 */}
|
||||
<filter id={p("f14")} x="713.479" y="233.665" width="31.9914" height="30.3453" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.2"/>
|
||||
</filter>
|
||||
<filter id={p("f15")} x="719.174" y="229.176" width="24.1945" height="21.3057" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.2"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Everything bobs */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.547 382.715C175.868 479.648 86.1392 654.573 127.914 829.517C145.271 881.371 165.201 911.977 222.934 941.975C253.336 957.772 327.499 950.5 375.543 921.664L445.393 890.457C490.741 873.851 509.571 876.412 538.499 889.192C577.028 910.414 587.499 931.5 649.206 964.222C729.486 1006.79 793.126 956.041 817.513 889.192C874.807 742.915 814.513 422.979 650.33 310.48C516.053 226.594 403.003 247.226 270.547 382.715Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm */}
|
||||
<g transform={`rotate(${leftArmAngle}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.699 773.068C271.728 736.698 272.986 728.506 287.229 709.133C299.637 692.255 259.841 627.746 226.231 577.586C219.861 568.08 205.392 568.903 199.905 578.945C176.511 621.76 137.043 694.31 143.076 742.936C156.217 848.842 228.428 842.851 257.699 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Bag — gentle pendulum sway */}
|
||||
<g transform={`rotate(${bagSwing}, 809, 562)`}>
|
||||
{/* Bag strap */}
|
||||
<path d="M809.219 562.116C810.943 564.299 813.643 569.352 814.5 571.999C813.437 573.914 664.398 718.453 662.943 720.135C660.931 722.463 656.504 724.217 655.73 726.823C655.652 725.678 651.798 713.917 651.256 711.76C651.947 712.338 808.372 561.734 809.219 562.116Z" fill="#7F573A"/>
|
||||
{/* Main bag body */}
|
||||
<path d="M190.806 491C194.519 504.309 205.784 521.535 214.752 532.161C267.81 595.038 336.55 644.105 407.584 684.151C424.994 693.869 442.737 702.972 460.779 711.456C466.01 713.902 471.508 716.101 476.821 718.438C486.209 722.572 497.576 729.565 507.585 731.015C508.887 730.566 509.441 730.354 510.051 729.059C510.924 727.206 511.087 724.992 511.928 723.109C513.661 719.228 519.02 715.858 522.76 714.171C545.038 704.118 619.341 691.939 641.08 700.392C646.086 702.337 648.196 705.609 650.735 710.016L651.256 711.761C651.798 713.918 655.652 725.679 655.73 726.824C656.313 732.3 659.858 738.575 660.848 744.412C665.317 770.752 670.972 801.777 653.299 824.737C641.266 840.363 615.91 848.362 596.854 851.092C567.669 855.272 534.037 845.281 522.487 815.613C514.088 801.849 511.086 767.005 510.241 750.61C510.01 749.877 509.856 748.891 509.096 748.514C497.021 742.507 481.675 738.616 470.056 732.016C466.407 730.87 458.211 726.897 454.524 725.132C443.472 719.899 432.571 714.356 421.835 708.504C410.521 702.477 398.821 696.635 387.712 690.298C345.935 666.657 306.427 639.208 269.69 608.311C252.994 594.346 239.89 583.267 224.877 566.974C212.893 553.877 201.927 539.881 192.075 525.112C189.416 521.122 185.689 512.36 183.837 510.089L183 510.239C183.378 502.266 183.782 496.434 190.806 491Z" fill="#C89F7B"/>
|
||||
{/* Bag shadow */}
|
||||
<path d="M650.736 710.017L651.257 711.761C651.799 713.918 655.653 725.679 655.73 726.825C656.314 732.3 659.858 738.575 660.849 744.412C665.318 770.752 670.973 801.777 653.3 824.737C641.267 840.363 615.911 848.362 596.855 851.092C567.67 855.272 534.038 845.281 522.488 815.613C523.676 816.49 525.015 818.838 525.439 818.926C529.443 819.742 535.002 816.01 538.423 814.421C540.962 816.568 544.646 826.455 547.887 828.829C552.582 832.271 563.243 824.329 565.916 820.33C568.011 817.192 570.56 816.129 573.604 814.214C577.882 811.521 577.134 808.853 575.642 804.673C572.443 794.604 562.887 796.219 555.518 792.044C552.319 790.233 547.804 784.386 544.873 781.842C541.385 778.519 540.358 770.607 537.902 766.856C535.878 763.764 535.019 762.257 533.541 758.79L533.794 758.366C536.039 761.865 538.418 766.164 540.983 769.25L541.39 769.73C542.046 771.531 545.049 774.158 546.576 775.67C557.985 784.845 571.556 786.987 585.328 790.471L589.456 791.033C588.258 787.895 587.448 786.466 588.305 783.277C590.482 782.864 590.808 783.179 592.185 781.935C594.358 772.93 596.953 772.331 605.457 770.855C608.006 772.202 613.202 775.851 615.808 777.569C623.527 776.908 638.254 766.52 644.213 761.489C655.679 751.642 654.993 735.747 652.758 722.17C651.984 717.463 650.39 715.022 650.736 710.017Z" fill="#A78160"/>
|
||||
{/* Bag clasp */}
|
||||
<path d="M588.303 783.276C590.481 782.863 590.806 783.178 592.184 781.935C594.356 772.929 596.951 772.331 605.455 770.855C608.004 772.202 613.2 775.85 615.806 777.569C617.927 780.536 618.974 782.616 618.226 786.435C616.642 794.542 606.853 800.379 598.943 798.547C593.953 797.396 592.137 794.831 589.454 791.033C588.257 787.895 587.447 786.466 588.303 783.276Z" fill="#252525"/>
|
||||
<path d="M546.576 775.671C557.985 784.846 571.556 786.988 585.328 790.472C579.652 790.905 574.29 790.487 568.661 789.765C565.379 789.341 561.968 787.773 559.017 789.429C555.751 788.314 548.196 779.02 546.576 775.671Z" fill="#A2795A"/>
|
||||
<path d="M541.391 769.728C542.743 770.972 544.987 773.434 546.463 773.929C545.957 771.519 543.785 769.269 542.061 767.571L542.02 766.761C543.527 767.84 545.9 771.034 548.315 772.866C556.22 778.878 565.034 781.18 574.74 782.145C578.083 782.475 585.901 782.614 588.305 783.275C587.449 786.464 588.259 787.894 589.456 791.031L585.328 790.469C571.556 786.985 557.985 784.844 546.576 775.668C545.049 774.156 542.046 771.529 541.391 769.728Z" fill="#7F573A"/>
|
||||
<path d="M523.368 725.967C527.723 733.368 523.136 746.775 517.744 752.942C516.114 752.24 511.562 749.727 510.242 750.609C510.011 749.876 509.857 748.891 509.097 748.514C497.022 742.507 481.676 738.616 470.057 732.016C478.257 731.892 508.598 751.61 517.329 745.836C518.576 745.01 518.465 740.107 518.52 738.585C518.563 737.383 516.716 735.38 515.805 734.291C518.237 735.623 520.09 737.94 522.882 737.527C524.578 735.38 523.15 729.378 523.368 725.967Z" fill="#A2795A"/>
|
||||
<path d="M511.691 732.274C514.377 727.898 517.699 720.111 523.366 725.968C523.149 729.379 524.577 735.381 522.881 737.528C520.089 737.941 518.236 735.624 515.803 734.292L511.691 732.274Z" fill="#7F573A"/>
|
||||
{/* Bag buckle dots */}
|
||||
<path d="M577.638 756.983C587.049 758.165 589.681 765.374 580.713 770.473C574.877 770.525 566.987 760.817 577.638 756.983Z" fill="#090909"/>
|
||||
<path d="M616.684 750.234C624.507 752.18 628.052 760.168 619.594 763.657C612.2 762.413 609.455 754.595 616.684 750.234Z" fill="#090909"/>
|
||||
</g>
|
||||
|
||||
{/* Right arm */}
|
||||
<g transform={`rotate(${rightArmAngle}, 712, 577)`}>
|
||||
<path
|
||||
d="M680.85 773.156C666.821 736.786 665.563 728.594 651.32 709.221C638.911 692.343 678.707 627.834 712.318 577.674C718.688 568.167 733.157 568.991 738.644 579.033C762.038 621.848 801.506 694.398 795.472 743.024C782.332 848.93 710.12 842.939 680.85 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f12")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Head group: drift (hat outside squash so it isn't distorted) */}
|
||||
<g transform={`translate(${headDx}, ${headDy})`}>
|
||||
|
||||
{/* Hat cluster — moves with head drift */}
|
||||
<path d="M592.564 204.563C607.021 195.397 635.862 196.42 652.061 200.586C669.129 204.976 688.579 216.966 702.096 228.128C703.73 229.477 708.969 233.276 709.97 234.778C711.752 236.207 713.143 237.274 714.765 238.914C720.623 232.413 730.35 221.154 739.527 229.577C741.362 231.394 741.841 231.772 742.97 234.065C750.161 247.715 736.817 249.238 733.951 257.948C737.268 259.252 738.218 259.71 741.137 261.795C746.103 265.633 751.311 268.925 756.191 272.575C763.67 278.166 773.466 288.52 779.17 296.14C800.143 326.203 810.361 370.412 776.386 395.979C770.172 400.655 761.949 403.064 754.398 404.274C752.549 404.569 748.18 404.866 746.894 405.19C743.4 401.593 732.333 397.104 727.379 394.144C720.883 390.264 715.221 386.898 709.097 382.266C669.009 351.945 633.45 315.951 590.711 289.015C587.406 286.932 580.004 281.64 576.606 280.833C576.388 278.189 573.208 274.172 572.492 271.566C571.48 267.884 572.132 263.761 570.563 260.173C570 258 567 241.5 579.833 213.534C583.673 209.342 587.47 206.909 592.564 204.563Z" fill="#DFB690"/>
|
||||
<g filter={`url(#${p("f13")})`}>
|
||||
<path d="M592.564 204.562C591.447 206.783 587.524 208.421 585.13 209.576C586.254 212.787 587.824 215.965 588.781 218.827C590.975 225.914 592.128 232.951 593.829 240.197C594.894 244.718 593.07 255.565 595.151 259.258C597.787 263.922 603.83 268.245 608.131 271.297C614.607 275.888 620.783 281.475 627.421 285.8C632.008 288.79 634.424 297.602 639.399 299.206C649.625 302.504 654.929 307.446 663.016 314.071C664.967 315.669 671.953 315.939 673.816 317.558C673.698 320.411 672.629 321.171 673.294 322.927L673.981 323L673.853 321.37C674.461 321.232 680.778 324.934 681.518 325.554C688.109 331.054 690.318 328.802 696.474 330.1C707.059 332.333 722.113 341.057 729.251 327.143C732.065 321.34 732.973 313.831 733.802 307.401C738.505 303.44 738.256 298.237 743.76 298.087C745.841 298.03 748.248 300.127 749.389 301.686C754.916 309.32 753.163 308.655 761.794 311.088C770.185 313.453 769.519 312.624 771.375 303.286C772.156 299.334 774.41 297.646 778.273 297L779.17 296.14C800.143 326.202 810.361 370.412 776.386 395.979C770.172 400.655 761.949 403.063 754.398 404.274C752.55 404.568 748.18 404.866 746.894 405.19C743.4 401.593 732.334 397.103 727.379 394.143C720.883 390.263 715.221 386.898 709.097 382.265C669.009 351.945 633.45 315.951 590.711 289.014C587.407 286.932 580.004 281.64 576.606 280.833C576.388 278.189 573.208 274.172 572.492 271.565C571.48 267.884 572.133 263.761 570.563 260.173C571.5 257 566 241 579.833 213.534C583.673 209.341 587.47 206.909 592.564 204.562Z" fill="#B38C69"/>
|
||||
</g>
|
||||
<path d="M714.764 238.914C720.623 232.413 730.35 221.154 739.527 229.576C741.362 231.394 741.841 231.772 742.969 234.065C750.16 247.715 736.816 249.238 733.95 257.948C733.119 259.752 732.692 260.091 730.787 261.028C728.436 261.839 726.439 262.467 724.205 263.61C721.927 262.444 720.647 261.881 718.612 260.278L718.537 259.64C719.194 258.757 719.251 258.673 719.709 257.672L719.302 257.339C716.774 255.217 715.494 254.49 713.879 251.509C709.303 245.13 713.844 244.822 714.764 238.914Z" fill="#E3B88E"/>
|
||||
<g filter={`url(#${p("f14")})`}>
|
||||
<path d="M742.968 234.064C750.16 247.714 736.815 249.238 733.949 257.947C733.118 259.751 732.691 260.09 730.787 261.027C728.435 261.839 726.438 262.467 724.204 263.61C721.927 262.443 720.646 261.88 718.611 260.277L718.537 259.639C719.193 258.757 719.25 258.672 719.708 257.672L719.302 257.339C716.773 255.217 715.493 254.49 713.878 251.509C715.185 252.527 715.936 253.15 717.381 253.953C719.401 253.772 722.21 251.19 725.079 250.082C726.717 250.078 728.002 248.385 729.273 247.162C731.692 244.658 735.552 244.158 738.484 242.4C741.485 240.595 741.469 237.278 742.799 234.424L742.968 234.064Z" fill="#A77754"/>
|
||||
</g>
|
||||
<path d="M718.611 260.277C720.535 259.611 727.674 258.508 730.285 257.905L730.895 258.524L730.787 261.027C728.435 261.839 726.438 262.467 724.204 263.61C721.927 262.444 720.646 261.88 718.611 260.277Z" fill="#7A5131"/>
|
||||
<g filter={`url(#${p("f15")})`}>
|
||||
<path d="M725.079 250.081L725.083 247.878C723.54 248.215 720.779 248.396 719.574 247.336C719.959 247.338 723.431 247.301 723.874 247.006C727.857 244.381 735.608 240.411 738.509 237.024C739.362 236.027 738.318 233.461 737.951 232.2C738.389 230.255 737.963 231.146 739.526 229.576C741.361 231.394 741.841 231.771 742.969 234.064L742.799 234.424C741.469 237.278 741.485 240.595 738.484 242.4C735.552 244.158 731.693 244.658 729.273 247.162C728.003 248.385 726.717 250.078 725.079 250.081Z" fill="#BC8860"/>
|
||||
</g>
|
||||
<path d="M724.164 264.823C719.181 262.105 713.493 261.671 710.938 259.491C710.187 256.534 711.243 255.827 709.399 252.988C707.996 250.836 705.816 248.694 707.118 246.243C708.002 246.639 708.527 248.022 709.155 249.08L709.81 249.136C711.328 246.312 712.47 243.14 713.64 240.137C713.357 238.356 711.458 237.444 709.694 235.483L709.968 234.778C711.75 236.207 713.141 237.274 714.763 238.914C713.843 244.822 709.302 245.13 713.878 251.509C715.493 254.49 716.773 255.217 719.301 257.339L719.707 257.672C719.25 258.673 719.193 258.757 718.536 259.64L718.611 260.278C720.646 261.881 721.926 262.444 724.204 263.61C726.437 262.468 728.435 261.839 730.786 261.028C732.691 260.091 733.118 259.752 733.949 257.948C737.266 259.252 738.216 259.71 741.135 261.795C736.25 261.368 728.569 262.579 724.164 264.823Z" fill="#BC8860"/>
|
||||
|
||||
{/* Head content: squash/stretch */}
|
||||
<g transform={`translate(493, 145) scale(${headSquashX}, ${headSquashY}) translate(-493, -145)`}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.376 270.172C464.042 264.005 502.076 255.372 544.876 270.172C598.376 288.672 415.876 288.172 450.376 270.172Z" fill="#030100"/>
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.499 245.499C524.955 248.602 489.943 257.335 463.185 249.888C429.739 240.578 555.068 236.442 533.499 245.499Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`}/>
|
||||
|
||||
{/* Left eye */}
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScaleY}) translate(-411, -465)`}>
|
||||
<path d="M411.479 428C419.678 428 423 432 424.408 434.321C431.455 442.807 434.448 450.812 435.286 461.939C436.53 478.451 428.58 501.025 409.175 501.922C402.907 502.212 396.782 499.978 392.176 495.714C372.967 478.168 379.456 428.811 411.479 428Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f5")})`}>
|
||||
<path d="M402.589 435.31C405.113 435.115 406.119 435.015 408.226 436.218C409.449 437.699 409.295 438.305 409.367 440.116C410.18 440.625 410.898 441.111 411.694 441.647L411.904 442.956C419.014 456.194 406.034 468.295 397.004 457.028C387.109 457.791 393.027 445.603 396.045 441.344C398.038 438.531 399.869 437.302 402.589 435.31Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M402.405 435.12C405.005 434.923 406.041 434.822 408.211 436.033C409.471 437.522 409.312 438.132 409.386 439.954C410.224 440.465 410.964 440.954 411.784 441.493L412 442.811C408.557 441.118 406.625 439.187 402.54 440.654C395.773 443.086 394.268 451.112 396.652 456.966C386.459 457.733 392.555 445.473 395.664 441.189C397.717 438.36 399.602 437.123 402.405 435.12Z" fill="#3A372F"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right eye */}
|
||||
<g transform={`translate(589, 466) scale(1, ${eyeScaleY}) translate(-589, -466)`}>
|
||||
<path d="M589.369 428.706C621.867 428.523 630.994 493.598 594.351 502.663C555.685 504.419 554.456 433.119 589.369 428.706Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M576.49 452.759C577.096 454.049 577.139 454.759 576.608 455.979C569.333 454.164 573.451 439.586 580.006 437.664C584.199 436.436 587.823 438.013 589.305 442.115C592.618 444.137 594.846 446.01 595.748 450.049C596.354 452.791 595.844 455.661 594.33 458.027C589.037 466.354 580.302 462.46 578.514 452.619C577.655 451.775 577.929 451.624 577.757 450.079L577.59 450.499L577.886 450.8L577.386 452.615L576.49 452.759Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f8")})`}>
|
||||
<path d="M576.06 452.732C576.72 454.041 576.766 454.762 576.188 456C568.275 454.158 572.754 439.363 579.885 437.413C584.446 436.166 588.388 437.766 590 441.93L585.246 442.04C580.159 445.421 579.418 446.592 578.261 452.59C577.327 451.734 577.625 451.58 577.438 450.013L577.257 450.438L577.578 450.743L577.035 452.586L576.06 452.732Z" fill="#312E24"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f9")})`}>
|
||||
<path d="M576.49 452.759L575.947 452.886L575.475 452.235C575.11 444.84 575.121 438.674 584.935 442.224C580.259 445.556 579.577 446.709 578.514 452.619C577.655 451.776 577.928 451.624 577.757 450.08L577.59 450.499L577.886 450.8L577.386 452.615L576.49 452.759Z" fill="#534639"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0"/>
|
||||
<g filter={`url(#${p("f10")})`}>
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.144 494.285C641.875 485.407 671.146 495.187 664.859 516.522C657.949 539.968 605.952 533.98 615.074 505.471C615.729 503.36 618.569 499.408 620.25 497.867C621.586 496.68 624.464 495.224 626.144 494.285Z" fill="#EF928B"/>
|
||||
<g filter={`url(#${p("f11")})`}>
|
||||
<path d="M632.012 497C626.769 497.048 619.649 501.673 620.012 507C624.18 507.091 632.486 501.087 632.012 497Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Smirk mouth */}
|
||||
<path d="M526.825 509.24C529.058 533.416 509.441 544.063 495.563 543.494C475.913 542.688 463.184 521.332 466.534 509.243C469.883 501.177 484.398 506.216 493.33 507.228C497.024 507.228 500.679 506.536 504.267 505.661C512.377 503.684 525.077 502.133 526.825 509.24Z" fill="#03050D"/>
|
||||
<path d="M515.455 529.644C505.491 517.086 486.755 521.664 478.999 530.01C477.283 531.857 477.679 534.691 479.632 536.284C489.719 544.518 503.636 544.538 514.499 536.344C516.626 534.74 517.111 531.73 515.455 529.644Z" fill="#E06B51"/>
|
||||
|
||||
</g>
|
||||
{/* end squash group */}
|
||||
</g>
|
||||
{/* end head drift group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,286 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black idle mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* with the same bob, head-drift, arm-sway, and blink animations as the yellow idle.
|
||||
*/
|
||||
export const BlackMascotIdle: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway — mirrors left arm with slight phase offset.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
// Blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScale = inBlink ? 0.12 : 1;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmi-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmi-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmi-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmi-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmi-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmi-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bmi-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bmi-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bmi-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bmi-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bmi-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bmi-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bmi-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bmi-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmi-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmi-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmi-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bmi-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmi-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmi-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmi-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Left eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmi-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmi-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Right eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmi-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmi-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bmi-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bmi-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bmi-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Mouth */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,236 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
|
||||
/**
|
||||
* BlackMascotLaughing — black variant of YellowMascotLaughing.
|
||||
*
|
||||
* Both arms wave out-of-phase with laughter.
|
||||
* Body bounces rapidly + shakes horizontally.
|
||||
* Head tilts side-to-side.
|
||||
* Happy ^^ eyes, open mouth + tongue.
|
||||
* Filter matrices from BlackIdelmascot.svg.
|
||||
*/
|
||||
export const BlackMascotLaughing: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmla-${k}`;
|
||||
|
||||
// ── Body bounce — rapid 3 Hz laughter bounce ────────────────────────────
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 3.0) * 18;
|
||||
|
||||
// ── Horizontal body wobble — small 5 Hz side shake ──────────────────────
|
||||
const wobble = Math.sin((frame / fps) * Math.PI * 5.0) * 5;
|
||||
|
||||
// ── Head drift + squash ─────────────────────────────────────────────────
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const headDx = Math.sin(dotPhase * 2.5) * 8 + wobble * 0.5;
|
||||
const headDy = Math.sin(dotPhase * 3.0) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase * 3.0));
|
||||
const headSquashY = 1 - 0.1 * press;
|
||||
const headSquashX = 1 + 0.07 * press;
|
||||
|
||||
// ── Head tilt — side-to-side laugh ──────────────────────────────────────
|
||||
const headTilt = Math.sin((frame / fps) * Math.PI * 2.0) * 9;
|
||||
|
||||
// ── Both arms shake with laughter (opposite phases) ─────────────────────
|
||||
const leftArmAngle = -15 + Math.sin((frame / fps) * Math.PI * 3.5) * 25;
|
||||
const rightArmAngle = 15 + Math.sin((frame / fps) * Math.PI * 3.5 + 1.1) * 25;
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body */}
|
||||
<filter id={p("f0")} x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="17" dy="28"/><feGaussianBlur stdDeviation="10.45"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-27" dy="-22"/><feGaussianBlur stdDeviation="29.75"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Head circle */}
|
||||
<filter id={p("f1")} x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="9" dy="2"/><feGaussianBlur stdDeviation="5.65"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-13"/><feGaussianBlur stdDeviation="19.7"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<filter id={p("f2")} x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
|
||||
{/* Left arm */}
|
||||
<filter id={p("f4")} x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Right arm */}
|
||||
<filter id={p("f5")} x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlights */}
|
||||
<filter id={p("f6")} x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
<filter id={p("f7")} x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* ── Everything bobs + wobbles ─────────────────────────────────────── */}
|
||||
<g transform={`translate(${wobble}, ${bob})`}>
|
||||
|
||||
{/* ── Body ────────────────────────────────────────────────────────── */}
|
||||
<path
|
||||
d="M270.545 382.714C175.866 479.647 86.1373 654.573 127.912 829.517C145.269 881.371 165.199 911.976 222.932 941.975C253.334 957.772 327.497 950.5 375.541 921.664L445.391 890.456C490.739 873.851 509.569 876.412 538.497 889.192C577.026 910.413 587.497 931.5 649.204 964.222C729.484 1006.79 793.124 956.041 817.511 889.192C874.805 742.915 814.511 422.978 650.328 310.479C516.051 226.594 403.001 247.226 270.545 382.714Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* ── Left arm — shakes up with laughter ─────────────────────────── */}
|
||||
<g transform={`rotate(${leftArmAngle}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.699 773.068C271.728 736.698 272.986 728.506 287.229 709.133C299.637 692.255 259.841 627.746 226.231 577.586C219.861 568.08 205.392 568.903 199.905 578.945C176.511 621.76 137.043 694.31 143.076 742.936C156.217 848.842 228.428 842.851 257.699 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* ── Right arm — shakes up with laughter (opposite phase) ─────────── */}
|
||||
<g transform={`rotate(${rightArmAngle}, 712, 577)`}>
|
||||
<path
|
||||
d="M680.848 773.156C666.819 736.786 665.561 728.594 651.318 709.221C638.909 692.343 678.705 627.834 712.316 577.674C718.686 568.167 733.155 568.991 738.642 579.033C762.036 621.848 801.504 694.398 795.471 743.024C782.33 848.93 710.118 842.939 680.848 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f5")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* ── Head group: drift + tilt + squash ───────────────────────────── */}
|
||||
<g transform={`translate(${headDx}, ${headDy}) rotate(${headTilt}, 493, 145)`}>
|
||||
<g transform={`translate(493, 145) scale(${headSquashX}, ${headSquashY}) translate(-493, -145)`}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.372 270.172C464.038 264.005 502.072 255.372 544.872 270.172C598.372 288.672 415.872 288.172 450.372 270.172Z" fill="#030100"/>
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.495 245.499C524.951 248.602 489.939 257.335 463.181 249.888C429.735 240.578 555.064 236.442 533.495 245.499Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={492.996} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`}/>
|
||||
|
||||
{/* Happy ^^ eyes */}
|
||||
<path d="M435.945 461.78C435.95 465.065 432.45 467.564 429.034 466.431C426.95 465.064 426.5 462.935 424.989 460.722C418.079 450.594 409.39 449.424 398.323 453.628C392.683 457.592 392.521 458.972 388.838 464.9C379.031 471.83 374.986 451.985 396.265 443.479C404.335 440.327 413.326 440.509 421.263 443.978C428.823 447.378 434.402 453.5 435.945 461.78Z" fill="#1C170B"/>
|
||||
<path d="M618.676 468.507C618.68 471.792 615.18 474.291 611.764 473.157C609.68 471.791 609.23 469.661 607.72 467.449C600.809 457.321 592.12 456.15 581.054 460.355C575.413 464.318 575.251 465.698 571.568 471.627C561.762 478.556 557.717 458.712 578.996 450.206C587.066 447.053 596.056 447.236 603.994 450.705C611.553 454.104 617.133 460.226 618.676 468.507Z" fill="#1C170B"/>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M353.998 488.785C366.288 488.07 381.73 490.477 384.997 505.019C386.022 509.579 385.139 514.363 382.552 518.257C378.405 524.432 372.213 526.795 365.333 528.245C353.919 529.158 338.869 527.064 334.77 514.24C333.371 509.718 333.883 504.821 336.188 500.686C339.884 493.968 346.958 490.735 353.998 488.785Z" fill="#F9A6A0"/>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M367.996 494C373.239 494.048 380.359 498.673 379.996 504C375.828 504.091 367.522 498.087 367.996 494Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.144 494.285C641.875 485.407 671.146 495.187 664.859 516.522C657.949 539.968 605.952 533.98 615.074 505.471C615.729 503.36 618.569 499.408 620.25 497.867C621.586 496.68 624.464 495.224 626.144 494.285Z" fill="#EF928B"/>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M632.012 497C626.769 497.048 619.649 501.673 620.012 507C624.18 507.091 632.486 501.087 632.012 497Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Open mouth + tongue */}
|
||||
<path d="M526.559 506.037C529.118 505.857 530.578 506.352 532.949 507.18C540.011 509.647 541.161 518.064 538.561 524.272C535.04 532.678 527.164 538.441 518.947 541.959C504.589 548.106 488.023 546.785 473.761 541.057C468.46 538.97 460.68 534.705 459.795 528.638C455.511 499.213 487.412 516.413 501.358 514.55C509.779 513.426 518.469 508.037 526.559 506.037Z" fill="black"/>
|
||||
<path d="M514.571 529.318C521.129 529.165 521.058 531.475 521.47 537.347C509.407 544.777 496.626 543.843 483.423 541.736C481.545 541.195 480.599 541.096 479.149 539.784C473.781 523.686 495.949 536.217 500.65 535.608C504.12 535.159 510.898 531.045 514.571 529.318Z" fill="#E06B51"/>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,306 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black listening mascot — uses exact paths and filters from BlackIdelmascot.svg.
|
||||
* Replicates yellow-MascotListening:
|
||||
* • Prominent head tilt toward the raised side (primary listening cue)
|
||||
* • Right arm held outward with gentle continuous sway
|
||||
* • Left arm gentle idle sway
|
||||
* • Slow body bob (calm, attentive breathing)
|
||||
* • Slow blink (focused/listening)
|
||||
* • Cheek warmth pulse
|
||||
*/
|
||||
export const BlackMascotListening: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmli-${k}`;
|
||||
|
||||
// Body bob — slow, calm breathing rhythm.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 0.9) * 9;
|
||||
|
||||
// Head tilt — prominent attentive listening tilt to the right.
|
||||
const headTiltBase = 11;
|
||||
const headTiltOscillate = Math.sin((frame / fps) * Math.PI * 0.35) * 3;
|
||||
const headTilt = headTiltBase + headTiltOscillate;
|
||||
|
||||
// Subtle head nod while tilted.
|
||||
const headNodY = Math.sin((frame / fps) * Math.PI * 0.55) * 6;
|
||||
const headNodX = Math.sin((frame / fps) * Math.PI * 0.28) * 3;
|
||||
|
||||
// Left arm — gentle idle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.1) * 6;
|
||||
|
||||
// Right arm — held outward, gentle continuous sway.
|
||||
const armSway = Math.sin((frame / fps) * Math.PI * 0.75) * 5;
|
||||
const rightArmAngle = -62 + armSway;
|
||||
|
||||
// Blink — slower, focused (attentive listener).
|
||||
const blinkPeriod = Math.round(fps * 3.5);
|
||||
const blinkOffset = Math.round(blinkPeriod * 0.3);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 5;
|
||||
const eyeScale = inBlink ? 0.1 : 1;
|
||||
|
||||
// Cheek warmth pulse.
|
||||
const cheekOpacity = 0.78 + Math.sin((frame / fps) * Math.PI * 0.85 + 0.6) * 0.09;
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
// Head tilt pivot: bottom of head circle = neck joint.
|
||||
const headPivotX = 493;
|
||||
const headPivotY = 255; // cy(145) + r(110)
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow */}
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.25" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id={p("f0")} x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" /><feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" /><feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id={p("f1")} x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" /><feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" /><feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id={p("f2")} x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id={p("f4")} x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" /><feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" /><feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Right arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id={p("f5")} x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" /><feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" /><feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id={p("f6")} x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id={p("f7")} x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id={p("f8")} x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id={p("f9")} x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id={p("f10")} x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id={p("f11")} x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id={p("f12")} x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse
|
||||
cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm — gentle idle sway */}
|
||||
<g transform={`rotate(${leftSway}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Right arm — held outward with gentle sway */}
|
||||
<g transform={`rotate(${rightArmAngle}, 712, 578)`}>
|
||||
<path
|
||||
d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f5")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Head group — everything tilts together */}
|
||||
<g transform={`rotate(${headTilt}, ${headPivotX}, ${headPivotY}) translate(${headNodX}, ${headNodY})`}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`} />
|
||||
|
||||
{/* Left eye */}
|
||||
<g transform={`translate(411.48, 465) scale(1, ${eyeScale}) translate(-411.48, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Right eye */}
|
||||
<g transform={`translate(589.37, 465) scale(1, ${eyeScale}) translate(-589.37, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter={`url(#${p("f8")})`}>
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f9")})`}>
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f10")})`}>
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter={`url(#${p("f11")})`}>
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter={`url(#${p("f12")})`}>
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Mouth — closed attentive smile */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,197 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
import { LoadingFace } from "../Ghosty/lib/LoadingFace";
|
||||
|
||||
/**
|
||||
* Black loading mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* with the same bob, head-drift, arm-sway animations as the black idle,
|
||||
* but replaces the face with a spinning loading ring.
|
||||
*/
|
||||
export const BlackMascotLoading: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway — mirrors left arm with slight phase offset.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bml-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bml-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bml-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bml-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bml-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bml-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bml-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bml-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bml-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bml-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bml-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bml-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bml-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bml-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Loading face — spinning ring, same center/scale as recording dot (495, 495, 70%). */}
|
||||
<g transform="translate(495, 495) scale(0.7) translate(-520, -555)">
|
||||
<LoadingFace frame={frame} fps={fps} color="#ffffff" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,370 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black love mascot — uses exact paths and filters from BlackIdelmascot.svg.
|
||||
* Replicates yellow-MascotLove:
|
||||
* 0 – 89 : normal idle (bob, head drift, arm sway, blink)
|
||||
* 90 – 120 : heart eyes fade IN
|
||||
* 120 – 210: heart eyes pulse, cheeks flush, mini hearts float up
|
||||
* 210 – 240: heart eyes fade OUT
|
||||
* 240 – 270: normal idle again → clean loop
|
||||
*/
|
||||
export const BlackMascotLove: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmlv-${k}`;
|
||||
|
||||
// Heart transition.
|
||||
const heartProgress = interpolate(
|
||||
frame,
|
||||
[90, 120, 210, 240],
|
||||
[0, 1, 1, 0],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.cubic) }
|
||||
);
|
||||
const normalEyeOpacity = 1 - heartProgress;
|
||||
const heartEyeOpacity = heartProgress;
|
||||
|
||||
// Heart pulse: 2 beats/s, amplitude grows with heartProgress.
|
||||
const heartBeat = 1 + Math.sin((frame / fps) * Math.PI * 4) * 0.09 * heartProgress;
|
||||
|
||||
// Body bob.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head drift + squash.
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const headDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const headDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const headSqY = 1 - 0.07 * press;
|
||||
const headSqX = 1 + 0.04 * press;
|
||||
|
||||
// Arms — gentle idle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.3) * 7;
|
||||
const rightSway = Math.sin((frame / fps) * Math.PI * 1.3 + 1.0) * 6;
|
||||
|
||||
// Blink — only during normal eye phase.
|
||||
const blinkPeriod = Math.round(fps * 2.8);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = heartProgress < 0.1 && (frame + blinkOffset) % blinkPeriod < 5;
|
||||
const eyeScaleNormal = inBlink ? 0.1 : 1;
|
||||
|
||||
// Cheek — flushes more during heart phase.
|
||||
const cheekOpacity =
|
||||
0.82 + heartProgress * 0.15 +
|
||||
Math.sin((frame / fps) * Math.PI * 1.1 + 1.0) * 0.06;
|
||||
|
||||
// Floating mini hearts.
|
||||
const floatHeart = (startF: number, x: number, baseY: number, sz: number) => {
|
||||
const prog = interpolate(frame, [startF, startF + 48], [0, 1], {
|
||||
extrapolateLeft: "clamp", extrapolateRight: "clamp",
|
||||
});
|
||||
const y = baseY - 72 * prog + bob;
|
||||
const op = interpolate(
|
||||
frame,
|
||||
[startF, startF + 6, startF + 38, startF + 48],
|
||||
[0, 0.9, 0.9, 0],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
) * heartProgress;
|
||||
const sc = sz * interpolate(frame, [startF, startF + 8], [0.5, 1], {
|
||||
extrapolateLeft: "clamp", extrapolateRight: "clamp",
|
||||
});
|
||||
return { x, y, op, sc };
|
||||
};
|
||||
const hA = floatHeart(124, 415, 388, 0.9);
|
||||
const hB = floatHeart(152, 568, 382, 0.8);
|
||||
const hC = floatHeart(176, 490, 358, 1.0);
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
// Heart-eye SVG → idelMascot coordinate shift (same as yellow).
|
||||
const HX = 113.386;
|
||||
const HY = 31;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow */}
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id={p("f0")} x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" /><feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" /><feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Head circle filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id={p("f1")} x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" /><feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" /><feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id={p("f2")} x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id={p("f4")} x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" /><feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" /><feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Right arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id={p("f5")} x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" /><feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="e1" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" /><feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="e1" result="e2" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
|
||||
</filter>
|
||||
|
||||
{/* Normal left eye highlights */}
|
||||
<filter id={p("f6")} x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id={p("f7")} x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Normal right eye highlights */}
|
||||
<filter id={p("f8")} x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id={p("f9")} x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id={p("f10")} x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id={p("f11")} x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id={p("f12")} x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
|
||||
{/* Pink glow blur (behind heart eyes) */}
|
||||
<filter id={p("glow")} x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse
|
||||
cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Floating mini hearts (bob-synced, gated by heartProgress) */}
|
||||
{[hA, hB, hC].map((h, i) => (
|
||||
<g key={i} transform={`translate(${h.x}, ${h.y}) scale(${h.sc})`} opacity={h.op}>
|
||||
<path
|
||||
d="M0,-10 C-2,-18 -17,-17 -17,-6 C-17,3 0,13 0,13 C0,13 17,3 17,-6 C17,-17 2,-18 0,-10 Z"
|
||||
fill="#E8405A"
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm */}
|
||||
<g transform={`rotate(${leftSway}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Right arm */}
|
||||
<g transform={`rotate(${rightSway}, 712, 578)`}>
|
||||
<path
|
||||
d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f5")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Head group: drift + squash */}
|
||||
<g transform={
|
||||
`translate(${headDx}, ${headDy}) ` +
|
||||
`translate(493, 145) scale(${headSqX}, ${headSqY}) translate(-493, -145)`
|
||||
}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`} />
|
||||
|
||||
{/* Normal round eyes (fade out as heart phase begins) */}
|
||||
<g opacity={normalEyeOpacity}>
|
||||
{/* Left eye */}
|
||||
<g transform={`translate(411.48, 465) scale(1, ${eyeScaleNormal}) translate(-411.48, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right eye */}
|
||||
<g transform={`translate(589.37, 466) scale(1, ${eyeScaleNormal}) translate(-589.37, -466)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
<g filter={`url(#${p("f8")})`}>
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f9")})`}>
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter={`url(#${p("f10")})`}>
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Heart eyes (fade in, pulse with love) */}
|
||||
<g opacity={heartEyeOpacity}>
|
||||
{/* Soft pink glow behind the hearts */}
|
||||
<ellipse cx={425} cy={464} rx={38} ry={30} fill="#FF6B8B" opacity={0.18} filter={`url(#${p("glow")})`} />
|
||||
<ellipse cx={584} cy={465} rx={38} ry={30} fill="#FF6B8B" opacity={0.18} filter={`url(#${p("glow")})`} />
|
||||
|
||||
{/* Left heart eye */}
|
||||
<g transform={`translate(${HX}, ${HY}) translate(312, 433) scale(${heartBeat}) translate(-312, -433)`}>
|
||||
<path d="M309.528 412.554C316.357 407.26 320.889 400.095 331.012 401.094C339.939 401.812 347.398 414.839 345.579 422.994C342.606 436.319 328.949 446.655 319.814 456.123C318.474 457.512 314.226 461.046 312.55 461.737C313.245 461.996 313.3 461.654 314.345 462.028L314.024 462.208C309.672 461.395 309.368 460.135 305.68 457.217L305.402 457.454C305.572 459.556 308.83 461.362 310.613 463.457L310.539 463.96C305.339 458.843 286.396 445.795 285.105 441.973C286.363 443.268 287.409 444.42 288.884 445.485L289.268 445.154C288.823 443.956 286.606 442.228 285.561 441.008L285.791 440.321C283.919 437.892 282.17 435.78 280.526 433.063C272.519 419.82 281.925 402.881 297.772 404.673C301.678 405.116 306.342 407.944 308.673 411.248C308.972 411.676 309.257 412.111 309.528 412.554Z" fill="#DF6266" />
|
||||
<path d="M312.55 461.736C313.245 461.995 313.3 461.653 314.345 462.027L314.023 462.207C309.671 461.394 309.367 460.134 305.68 457.216L305.402 457.453C305.572 459.555 308.829 461.361 310.613 463.456L310.539 463.96C305.339 458.842 286.396 445.794 285.105 441.972C286.363 443.268 287.408 444.419 288.884 445.484L289.267 445.153C288.823 443.955 286.605 442.228 285.56 441.008L285.791 440.32C294.825 448.827 303.117 454.01 312.55 461.736Z" fill="#aaaaaa" />
|
||||
<path d="M320.235 405.907C322.834 405.918 329.975 406.908 331.182 409.254C329.977 412.892 325.408 411.266 322.545 411.046C321.563 410.97 321.286 411.546 320.603 412.172C318.832 413.875 315.912 416.685 313.35 415.893C311.056 412.468 317.628 407.429 320.235 405.907Z" fill="#F7CBCF" />
|
||||
<path d="M294.67 413.177C296.271 413.159 296.778 413.115 298.207 413.839C300.033 416.095 298.468 417.502 296.97 419.543C295.925 419.733 294.792 419.183 293.908 418.708C292.179 416.779 293.496 414.922 294.67 413.177Z" fill="#F7CBCF" />
|
||||
</g>
|
||||
|
||||
{/* Right heart eye */}
|
||||
<g transform={`translate(${HX}, ${HY}) translate(470, 432) scale(${heartBeat}) translate(-470, -432)`}>
|
||||
<path d="M443.479 441.876C435.348 431.202 429.644 416.448 442.673 406.948C455.28 397.754 460.826 407.185 469.392 413.799C475.761 410.114 481.06 404.044 489.173 406.213C493.482 407.365 498.274 411.374 500.184 415.271C511.834 439.058 477.213 454.036 464.376 463.741L464.404 464.011L463.938 464.177C461.818 463.029 458.23 457.264 454.601 455.317L454.167 455.659C454.995 459.211 459.324 463.162 461.881 466.278C455.136 460.531 448.861 450.362 442.42 443.884C441.966 443.427 442.162 442.984 442.319 442.466L443.479 441.876Z" fill="#DF6266" />
|
||||
<path d="M464.374 463.741L464.402 464.011L463.937 464.177C461.817 463.029 458.229 457.264 454.599 455.317L454.166 455.659C454.994 459.211 459.323 463.162 461.879 466.278C455.135 460.531 448.86 450.362 442.419 443.884C441.965 443.427 442.16 442.984 442.318 442.466L443.478 441.876C450.036 449.329 457.637 455.932 464.374 463.741Z" fill="#aaaaaa" />
|
||||
<path d="M451.02 410.51C453.805 410.226 455.531 410.662 458.212 411.216C456.494 413.134 455.392 413.839 453.216 415.21C451.742 415.908 450.139 416.232 448.523 415.955C447.409 415.181 447.696 415.617 447.415 414.347C448.034 412.223 449.21 411.648 451.02 410.51Z" fill="#FCF8F3" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Cheeks (flush during heart phase) */}
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter={`url(#${p("f11")})`}>
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
</g>
|
||||
<g opacity={cheekOpacity}>
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter={`url(#${p("f12")})`}>
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Mouth — closed content smile */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,310 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black pickup mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* with the same bouncy squash-and-stretch animation as yellow-MascotPickup,
|
||||
* plus the idle bob, head-drift, arm-sway, and blink.
|
||||
*/
|
||||
export const BlackMascotPickup: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const t = frame / fps;
|
||||
|
||||
// Three bounces with decreasing squash + a small upward hop each peak.
|
||||
const times = [0, 0.18, 0.36, 0.54, 0.72, 0.90, 1.08, 4.0];
|
||||
const sx = interpolate(t, times, [1, 1.18, 1, 1.12, 1, 1.06, 1, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
const sy = interpolate(t, times, [1, 0.74, 1, 0.82, 1, 0.91, 1, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
const ly = interpolate(t, times, [0, 0, -90, 0, -50, 0, -20, 0], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway — mirrors left arm with slight phase offset.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
// Blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScale = inBlink ? 0.12 : 1;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
transformOrigin: "50% 100%",
|
||||
transform: `translateY(${ly}px) scale(${sx}, ${sy})`,
|
||||
}}
|
||||
>
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmp-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmp-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmp-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmp-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmp-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmp-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bmp-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bmp-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bmp-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bmp-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bmp-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bmp-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bmp-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bmp-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmp-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmp-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmp-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bmp-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmp-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmp-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmp-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Left eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmp-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmp-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Right eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmp-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmp-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bmp-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bmp-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bmp-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Mouth */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,197 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
import { RecordingFace } from "../Ghosty/lib/RecordingFace";
|
||||
|
||||
/**
|
||||
* Black recording mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* with the same bob, head-drift, arm-sway animations as the black idle,
|
||||
* but replaces the face with a pulsing red recording dot.
|
||||
*/
|
||||
export const BlackMascotRecording: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway — mirrors left arm with slight phase offset.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmr-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmr-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmr-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmr-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmr-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmr-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bmr-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmr-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmr-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmr-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bmr-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmr-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmr-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmr-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Recording face — pulsing dot, centered at (495, 495): 25px lower + 70% scale. */}
|
||||
<g transform="translate(495, 495) scale(0.7) translate(-520, -555)">
|
||||
<RecordingFace frame={frame} fps={fps} color="#ff3b30" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,345 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black sleep mascot — uses exact paths and filters from BlackIdelmascot.svg.
|
||||
* Replicates yellow-MascotSleep: blinks normally, then eyes slowly droop closed,
|
||||
* then sleep-arc eyes appear and Zzz letters float upward.
|
||||
*/
|
||||
export const BlackMascotSleep: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
// Normal blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const blinkScale = inBlink ? 0.12 : 1;
|
||||
|
||||
// Sleep animation — slow eye-close then floating Zzz.
|
||||
const sleepStartFrame = Math.round(fps * 2.5);
|
||||
const sleepFullFrame = Math.round(fps * 4.0);
|
||||
const inSleepTransition = frame >= sleepStartFrame;
|
||||
const sleepProgress = interpolate(frame, [sleepStartFrame, sleepFullFrame], [0, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
easing: Easing.inOut(Easing.cubic),
|
||||
});
|
||||
const isAsleep = frame >= sleepFullFrame;
|
||||
|
||||
// Eye openness: normal blink while awake, slow droop during sleep transition.
|
||||
const eyeScale = inSleepTransition ? Math.max(0, 1 - sleepProgress) : blinkScale;
|
||||
// Suppress blink highlights mid-droop so pupils don't pop on/off.
|
||||
const effectiveInBlink = inSleepTransition ? false : inBlink;
|
||||
// Switch to sleep-arc eyes once eyelids have closed.
|
||||
const showSleepEyes = eyeScale <= 0.06;
|
||||
|
||||
// Floating Z letters — staggered, drift up and fade out.
|
||||
const zPeriod = Math.round(fps * 2.2);
|
||||
const zBaseStart = sleepFullFrame + Math.round(fps * 0.4);
|
||||
const getZ = (delay: number, baseX: number, fontSize: number) => {
|
||||
const startAt = zBaseStart + delay;
|
||||
if (!isAsleep || frame < startAt) return { x: baseX, y: 220, opacity: 0, fontSize };
|
||||
const cycleFrame = (frame - startAt) % zPeriod;
|
||||
const t = cycleFrame / zPeriod;
|
||||
return {
|
||||
x: baseX + t * 20,
|
||||
y: 220 - t * 120,
|
||||
opacity: interpolate(t, [0, 0.1, 0.72, 1], [0, 1, 0.85, 0]),
|
||||
fontSize,
|
||||
};
|
||||
};
|
||||
const z1 = getZ(0, 605, 40);
|
||||
const z2 = getZ(Math.round(fps * 0.72), 624, 56);
|
||||
const z3 = getZ(Math.round(fps * 1.44), 643, 76);
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bms-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bms-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bms-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bms-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bms-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bms-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bms-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bms-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bms-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bms-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bms-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bms-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bms-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bms-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bms-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bms-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bms-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bms-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bms-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bms-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bms-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Sleep arc eyes — visible only once eyelids are fully closed */}
|
||||
{showSleepEyes && (
|
||||
<>
|
||||
<path d="M390,466 Q411,481 436,466" stroke="#1C170B" strokeWidth="5.5" strokeLinecap="round" fill="none" />
|
||||
<path d="M563,466 Q589,481 615,466" stroke="#1C170B" strokeWidth="5.5" strokeLinecap="round" fill="none" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Left eye — scaleY droops during sleep transition, hidden once sleep-arc shows */}
|
||||
{!showSleepEyes && (
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!effectiveInBlink && (
|
||||
<>
|
||||
<g filter="url(#bms-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bms-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
)}
|
||||
|
||||
{/* Right eye — scaleY droops during sleep transition, hidden once sleep-arc shows */}
|
||||
{!showSleepEyes && (
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!effectiveInBlink && (
|
||||
<>
|
||||
<g filter="url(#bms-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bms-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bms-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
)}
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bms-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bms-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Mouth */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
|
||||
{/* Zzz — floating letters that drift up after mascot falls asleep */}
|
||||
{isAsleep && (
|
||||
<>
|
||||
<text x={z1.x} y={z1.y} fontSize={z1.fontSize} fontFamily="Arial Rounded MT Bold, Arial Black, Arial, sans-serif" fontWeight="900" fill="#5B9BD5" opacity={z1.opacity} textAnchor="middle">Z</text>
|
||||
<text x={z2.x} y={z2.y} fontSize={z2.fontSize} fontFamily="Arial Rounded MT Bold, Arial Black, Arial, sans-serif" fontWeight="900" fill="#4A8AC4" opacity={z2.opacity} textAnchor="middle">Z</text>
|
||||
<text x={z3.x} y={z3.y} fontSize={z3.fontSize} fontFamily="Arial Rounded MT Bold, Arial Black, Arial, sans-serif" fontWeight="900" fill="#3A7AB3" opacity={z3.opacity} textAnchor="middle">Z</text>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,300 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black talking mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* with the same bob, head-drift, arm-sway, and blink as the black idle,
|
||||
* but replaces the static mouth with a lip-sync jaw-drop animation.
|
||||
*/
|
||||
export const BlackMascotTalking: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway — mirrors left arm with slight phase offset.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
// Blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScale = inBlink ? 0.12 : 1;
|
||||
|
||||
// Lip sync — ~1.5–2.3 Hz for natural speech pace.
|
||||
const talkA = Math.abs(Math.sin((frame / fps) * Math.PI * 3.0));
|
||||
const talkB = Math.abs(Math.sin((frame / fps) * Math.PI * 4.6 + 1.2));
|
||||
const mouthOpen = Math.max(talkA, talkB * 0.8);
|
||||
// Tongue fades in only when mouth is open enough.
|
||||
const tongueOpacity = Math.min(1, Math.max(0, (mouthOpen - 0.15) / 0.35));
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmt-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmt-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmt-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmt-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmt-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmt-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bmt-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bmt-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bmt-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bmt-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bmt-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bmt-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bmt-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bmt-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmt-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmt-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmt-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bmt-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmt-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmt-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmt-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Left eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmt-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmt-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Right eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmt-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmt-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bmt-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bmt-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bmt-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Talking mouth — pivot at top edge (y=508), scales downward like a jaw drop */}
|
||||
<g transform={`translate(495,508) scale(1,${mouthOpen}) translate(-495,-508)`}>
|
||||
<path
|
||||
d="M453,508 Q453,501 463,501 L527,501 Q537,501 537,508 Q537,532 520,546 Q495,557 470,546 Q453,532 453,508 Z"
|
||||
fill="#1C170B"
|
||||
/>
|
||||
<ellipse cx={495} cy={532} rx={24} ry={10} fill="#C03030" opacity={tongueOpacity} />
|
||||
<ellipse cx={483} cy={526} rx={7} ry={4} fill="#E07070" opacity={tongueOpacity * 0.85} />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,330 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black thinking mascot — uses exact paths and filters from BlackIdelmascot.svg.
|
||||
* Replicates yellow-MascotThinking: starts idle then transitions into thinking pose —
|
||||
* left arm raises toward chin, head tilts, eyes look up-left, smile becomes "hmm".
|
||||
*/
|
||||
export const BlackMascotThinking: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Left arm gentle sway (idle baseline).
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
// Steady right arm sway.
|
||||
const steadySway = Math.sin((frame / fps) * Math.PI * 1.6 + 0.3) * 6;
|
||||
|
||||
// Blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScale = inBlink ? 0.12 : 1;
|
||||
|
||||
// Thinking transition — starts at 1s, fully in at 2s.
|
||||
const thinkStartFrame = Math.round(fps * 1.0);
|
||||
const thinkFullFrame = Math.round(fps * 2.0);
|
||||
const thinkProgress = interpolate(frame, [thinkStartFrame, thinkFullFrame], [0, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
easing: Easing.inOut(Easing.cubic),
|
||||
});
|
||||
const isThinking = thinkProgress >= 1;
|
||||
|
||||
// Left arm raises toward body/chin, then gently oscillates.
|
||||
const thinkArmOscillate = isThinking ? Math.sin((frame / fps) * Math.PI * 0.5) * 2 : 0;
|
||||
const effectiveLeftSway = interpolate(thinkProgress, [0, 1], [leftSway, -128]) + thinkArmOscillate;
|
||||
|
||||
// Head tilts slightly toward raised arm.
|
||||
const headTilt = isThinking
|
||||
? -4.5 + Math.sin((frame / fps) * Math.PI * 0.38) * 1.8
|
||||
: interpolate(thinkProgress, [0, 1], [0, -4.5]);
|
||||
|
||||
// Eyes drift up-left.
|
||||
const thinkEyeX = thinkProgress * -6;
|
||||
const thinkEyeY = thinkProgress * -9;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmth-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmth-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmth-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmth-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmth-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmth-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right steady arm filter — from BlackIdelmascot.svg filter5_iig */}
|
||||
<filter id="bmth-f5" x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bmth-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bmth-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bmth-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bmth-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bmth-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bmth-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bmth-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmth-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmth-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmth-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right steady arm — gentle sway */}
|
||||
<g transform={`rotate(${steadySway}, 655, 709)`}>
|
||||
<g filter="url(#bmth-f5)">
|
||||
<path d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — raises toward chin while thinking */}
|
||||
<g transform={`rotate(${effectiveLeftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmth-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmth-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmth-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Face — rotates for head tilt */}
|
||||
<g transform={`rotate(${headTilt}, 495, 375)`}>
|
||||
|
||||
{/* Left eye — gaze drifts up-left while thinking */}
|
||||
<g transform={`translate(${thinkEyeX}, ${thinkEyeY})`}>
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmth-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmth-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right eye — gaze drifts up-left while thinking */}
|
||||
<g transform={`translate(${thinkEyeX}, ${thinkEyeY})`}>
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmth-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmth-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bmth-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bmth-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bmth-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Normal smile — fades out as thinking kicks in */}
|
||||
<g opacity={Math.max(0, 1 - thinkProgress * 2.2)}>
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
</g>
|
||||
|
||||
{/* "Hmm" mouth — asymmetric slight frown, fades in */}
|
||||
<path
|
||||
d="M480,509 Q490,518 503,511 Q512,505 519,509"
|
||||
stroke="#1C170B"
|
||||
strokeWidth="4.5"
|
||||
strokeLinecap="round"
|
||||
fill="none"
|
||||
opacity={Math.min(1, thinkProgress * 2.5)}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,297 @@
|
||||
import React from "react";
|
||||
import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
/**
|
||||
* Black wave mascot — uses exact paths and filters from BlackIdelmascot.svg
|
||||
* for the body, head, and left arm. The right waving arm uses the same path as
|
||||
* yellow-MascotWave2 with #3A3A3A fill and black-tuned inner shadow filter.
|
||||
* Same keyframe hi-wave animation: 3 swings then a rest pause, loops every 2.4s.
|
||||
*/
|
||||
export const BlackMascotWave: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
// Gentle bob for the whole character.
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.2) * 14;
|
||||
|
||||
// Head dot drifts independently and squashes when pressing into the body.
|
||||
const dotPhase = (frame / fps) * Math.PI * 1.0;
|
||||
const dotDx = Math.sin(dotPhase * 0.7) * 6;
|
||||
const dotDy = Math.sin(dotPhase) * 9;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const dotSquashY = 1 - 0.08 * press;
|
||||
const dotSquashX = 1 + 0.05 * press;
|
||||
|
||||
// Right arm wave — 3 swings then rest, loops every 2.4s.
|
||||
const easeInOut = Easing.inOut(Easing.cubic);
|
||||
const wavePeriod = Math.round(fps * 2.4);
|
||||
const frameInCycle = frame % wavePeriod;
|
||||
const wave = interpolate(
|
||||
frameInCycle,
|
||||
[0, wavePeriod * 0.12, wavePeriod * 0.25, wavePeriod * 0.38, wavePeriod * 0.50, wavePeriod * 0.62, wavePeriod * 0.75, wavePeriod],
|
||||
[0, -9, 0, -7, 0, -5, 0, 0],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: easeInOut }
|
||||
);
|
||||
|
||||
// Left arm gentle sway.
|
||||
const leftSway = Math.sin((frame / fps) * Math.PI * 1.6) * 7;
|
||||
|
||||
// Blink every ~2.6s for ~6 frames.
|
||||
const blinkPeriod = Math.round(fps * 2.6);
|
||||
const blinkOffset = Math.round(blinkPeriod / 2);
|
||||
const inBlink = (frame + blinkOffset) % blinkPeriod < 6;
|
||||
const eyeScale = inBlink ? 0.12 : 1;
|
||||
|
||||
const size = Math.min(width, height) * 0.85;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
{/* Ground shadow gradient */}
|
||||
<radialGradient id="bmw-ground" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body filter — from BlackIdelmascot.svg filter0_iig */}
|
||||
<filter id="bmw-f0" x="90.3867" y="238.634" width="765.266" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="17" dy="28" />
|
||||
<feGaussianBlur stdDeviation="10.45" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 0 0.439078 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-27" dy="-22" />
|
||||
<feGaussianBlur stdDeviation="29.75" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0207891 0 0 0 0 0.0161271 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Head filter — from BlackIdelmascot.svg filter1_iig */}
|
||||
<filter id="bmw-f1" x="379.002" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="9" dy="2" />
|
||||
<feGaussianBlur stdDeviation="5.65" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-2" dy="-13" />
|
||||
<feGaussianBlur stdDeviation="19.7" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadow filters */}
|
||||
<filter id="bmw-f2" x="423.502" y="239.5" width="153.77" height="66.86" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
<filter id="bmw-f3" x="434.979" y="217.947" width="123.535" height="57.3708" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.25" />
|
||||
</filter>
|
||||
|
||||
{/* Left arm filter — from BlackIdelmascot.svg filter4_iig */}
|
||||
<filter id="bmw-f4" x="138.459" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="1" dy="-20" />
|
||||
<feGaussianBlur stdDeviation="7.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="3" dy="-8" />
|
||||
<feGaussianBlur stdDeviation="3.55" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 0.8 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Right wave arm filter — bounds from MascotCharacter f4, black inner shadow values */}
|
||||
<filter id="bmw-f5" x="759.925" y="474.413" width="170.767" height="268.758" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-11" dy="28" />
|
||||
<feGaussianBlur stdDeviation="11" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dx="-8" dy="1" />
|
||||
<feGaussianBlur stdDeviation="4.25" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.0196078 0 0 0 0 0.0156863 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703} />
|
||||
<feDisplacementMap in="effect2_innerShadow" scale={8} xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
|
||||
<feMerge><feMergeNode in="displacedImage" /></feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlight filters */}
|
||||
<filter id="bmw-f6" x="390.22" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.65" />
|
||||
</filter>
|
||||
<filter id="bmw-f7" x="390.302" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Right eye highlight filters */}
|
||||
<filter id="bmw-f8" x="570.86" y="435.358" width="27.0383" height="29.1121" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.95" />
|
||||
</filter>
|
||||
<filter id="bmw-f9" x="571.302" y="436.3" width="19.4" height="20.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
<filter id="bmw-f10" x="574.669" y="440.492" width="10.9664" height="13.0938" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.35" />
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlight filters */}
|
||||
<filter id="bmw-f11" x="366.18" y="492.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
<filter id="bmw-f12" x="618.202" y="495.2" width="15.6312" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="0.9" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<g transform={`translate(500, 975) scale(${1 - bob / 600}, 1)`}>
|
||||
<ellipse cx={0} cy={0} rx={300} ry={28} fill="url(#bmw-ground)" />
|
||||
</g>
|
||||
|
||||
{/* Everything bobs together */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Head — drifts + squashes independently */}
|
||||
<g transform={
|
||||
`translate(${dotDx}, ${dotDy}) ` +
|
||||
`translate(493 145) scale(${dotSquashX} ${dotSquashY}) translate(-493 -145)`
|
||||
}>
|
||||
<g filter="url(#bmw-f1)">
|
||||
<circle cx="493.002" cy="145" r="110" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Body */}
|
||||
<g filter="url(#bmw-f0)">
|
||||
<path d="M270.549 382.715C175.87 479.648 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.977 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.457C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.414 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.979 650.332 310.48C516.055 226.594 403.004 247.226 270.549 382.715Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
|
||||
{/* Right waving arm — rotates around pivot (776, 568) */}
|
||||
<g transform={`rotate(${wave}, 776, 568)`}>
|
||||
<g filter="url(#bmw-f5)">
|
||||
<path d="M821.855 513.95C798.846 545.418 795.5 553 776.706 568C760.334 581.067 781.974 653.709 801.375 710.888C805.052 721.724 819.237 724.693 827.147 716.425C860.877 681.172 917.862 621.391 924.689 572.869C939.558 467.192 868.275 454.188 821.855 513.95Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Left arm — gentle sway */}
|
||||
<g transform={`rotate(${leftSway}, 290, 700)`}>
|
||||
<g filter="url(#bmw-f4)">
|
||||
<path d="M257.701 773.068C271.729 736.698 272.988 728.506 287.231 709.133C299.639 692.255 259.843 627.746 226.233 577.586C219.863 568.08 205.394 568.903 199.907 578.945C176.512 621.76 137.045 694.31 143.078 742.936C156.219 848.842 228.43 842.851 257.701 773.068Z" fill="#3A3A3A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter="url(#bmw-f2)">
|
||||
<path d="M450.377 270.172C464.044 264.005 502.077 255.372 544.877 270.172C598.377 288.672 415.877 288.172 450.377 270.172Z" fill="#030100" />
|
||||
</g>
|
||||
<g opacity={0.4} filter="url(#bmw-f3)">
|
||||
<path d="M533.501 245.499C524.957 248.602 489.945 257.335 463.187 249.888C429.741 240.578 555.07 236.442 533.501 245.499Z" fill="white" />
|
||||
</g>
|
||||
|
||||
{/* Left eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(411, 465) scale(1, ${eyeScale}) translate(-411, -465)`}>
|
||||
<path d="M411.481 428C419.68 428 423.001 432 424.41 434.321C431.457 442.807 434.45 450.812 435.288 461.939C436.532 478.451 428.582 501.025 409.177 501.922C402.908 502.212 396.784 499.978 392.178 495.714C372.969 478.168 379.457 428.811 411.481 428Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmw-f6)">
|
||||
<path d="M402.591 435.31C405.115 435.115 406.121 435.015 408.228 436.218C409.451 437.699 409.297 438.305 409.369 440.116C410.182 440.625 410.9 441.111 411.696 441.647L411.906 442.956C419.016 456.194 406.036 468.295 397.006 457.028C387.111 457.791 393.029 445.603 396.047 441.344C398.04 438.531 399.871 437.302 402.591 435.31Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmw-f7)">
|
||||
<path d="M402.407 435.12C405.007 434.923 406.043 434.822 408.213 436.033C409.473 437.522 409.314 438.132 409.388 439.954C410.226 440.465 410.966 440.954 411.786 441.493L412.002 442.811C408.559 441.118 406.627 439.187 402.542 440.654C395.775 443.086 394.27 451.112 396.654 456.966C386.461 457.733 392.557 445.473 395.666 441.189C397.719 438.36 399.604 437.123 402.407 435.12Z" fill="#3A372F" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Right eye — scaleY collapses on blink */}
|
||||
<g transform={`translate(589, 465) scale(1, ${eyeScale}) translate(-589, -465)`}>
|
||||
<path d="M589.371 428.706C621.869 428.523 630.996 493.598 594.353 502.663C555.687 504.419 554.458 433.119 589.371 428.706Z" fill="#1C170B" />
|
||||
{!inBlink && (
|
||||
<>
|
||||
<g filter="url(#bmw-f8)">
|
||||
<path d="M576.492 452.759C577.098 454.049 577.141 454.759 576.61 455.979C569.335 454.164 573.453 439.586 580.008 437.664C584.201 436.436 587.825 438.013 589.307 442.115C592.62 444.137 594.848 446.01 595.75 450.049C596.356 452.791 595.846 455.661 594.332 458.027C589.039 466.354 580.304 462.46 578.516 452.619C577.657 451.775 577.931 451.624 577.759 450.079L577.592 450.499L577.888 450.8L577.388 452.615L576.492 452.759Z" fill="#FAF3EC" />
|
||||
</g>
|
||||
<g filter="url(#bmw-f9)">
|
||||
<path d="M576.062 452.732C576.721 454.041 576.768 454.762 576.19 456C568.277 454.158 572.756 439.363 579.887 437.413C584.448 436.166 588.39 437.766 590.002 441.93L585.248 442.04C580.161 445.421 579.42 446.592 578.263 452.59C577.329 451.734 577.627 451.58 577.44 450.013L577.259 450.438L577.58 450.743L577.037 452.586L576.062 452.732Z" fill="#312E24" />
|
||||
</g>
|
||||
<g filter="url(#bmw-f10)">
|
||||
<path d="M576.492 452.759L575.949 452.886L575.477 452.235C575.112 444.84 575.123 438.674 584.937 442.224C580.261 445.556 579.579 446.709 578.516 452.619C577.657 451.776 577.93 451.624 577.759 450.08L577.592 450.499L577.887 450.8L577.388 452.615L576.492 452.759Z" fill="#534639" />
|
||||
</g>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0" />
|
||||
<g filter="url(#bmw-f11)">
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.146 494.285C641.877 485.407 671.148 495.187 664.861 516.522C657.951 539.968 605.954 533.98 615.076 505.471C615.731 503.36 618.571 499.408 620.251 497.867C621.588 496.68 624.466 495.224 626.146 494.285Z" fill="#EF928B" />
|
||||
<g filter="url(#bmw-f12)">
|
||||
<path d="M632.014 497C626.771 497.048 619.651 501.673 620.014 507C624.182 507.091 632.488 501.087 632.014 497Z" fill="#FDC3BF" />
|
||||
</g>
|
||||
|
||||
{/* Mouth */}
|
||||
<path d="M471.506 494.784C471.501 491.499 475.001 489 478.417 490.134C480.501 491.5 480.951 493.63 482.462 495.842C489.372 505.97 498.062 507.141 509.128 502.936C514.768 498.973 514.93 497.593 518.613 491.664C528.42 484.735 532.465 504.579 511.186 513.085C503.116 516.238 494.125 516.055 486.188 512.586C478.628 509.187 473.049 503.065 471.506 494.784Z" fill="#1C170B" />
|
||||
<path d="M509.129 502.936C514.769 498.973 514.931 497.593 518.614 491.664L520.236 492.572C521.2 496.986 512.311 506.706 507.96 505.884L507.713 505.234L509.129 502.936Z" fill="#312E24" />
|
||||
</g>
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,314 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
Easing,
|
||||
interpolate,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
|
||||
export const BlackMascotWink: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
const p = (k: string) => `bmwk-${k}`;
|
||||
|
||||
// ── Relaxed body bob ─────────────────────────────────────────────────────
|
||||
const bob = Math.sin((frame / fps) * Math.PI * 1.0) * 10;
|
||||
|
||||
// ── Head drift + squash ─────────────────────────────────────────────────
|
||||
const dotPhase = (frame / fps) * Math.PI;
|
||||
const headDx = Math.sin(dotPhase * 0.7) * 5;
|
||||
const headDy = Math.sin(dotPhase) * 7;
|
||||
const press = Math.max(0, Math.sin(dotPhase));
|
||||
const headSquashY = 1 - 0.07 * press;
|
||||
const headSquashX = 1 + 0.05 * press;
|
||||
|
||||
// ── Wink transition: right eye open → wink ──────────────────────────────
|
||||
const winkProgress = interpolate(frame, [60, 78], [0, 1], {
|
||||
easing: Easing.inOut(Easing.quad),
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
const openRightEyeOpacity = 1 - winkProgress;
|
||||
const winkEyeOpacity = winkProgress;
|
||||
|
||||
// Slight head tilt as wink comes in
|
||||
const headTilt = interpolate(frame, [60, 85], [0, 4], {
|
||||
easing: Easing.out(Easing.quad),
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
|
||||
// ── Left eye blink — only after wink is set (frame 95+) ─────────────────
|
||||
const blinkPeriod = Math.round(fps * 3.5);
|
||||
const blinkDur = Math.round(fps * 0.14);
|
||||
const blinkOffset = frame < 95 ? 0 : (frame - 95) % blinkPeriod;
|
||||
const leftEyeScaleY =
|
||||
blinkOffset < blinkDur
|
||||
? interpolate(
|
||||
blinkOffset,
|
||||
[0, blinkDur * 0.35, blinkDur * 0.65, blinkDur],
|
||||
[1, 0.06, 0.06, 1],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
)
|
||||
: 1;
|
||||
|
||||
// ── Right arm — waves only after wink is set ────────────────────────────
|
||||
const rightArmWave = interpolate(frame, [70, 95], [0, 1], {
|
||||
easing: Easing.out(Easing.quad),
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
const rightArmAngle =
|
||||
(10 + Math.sin((frame / fps) * Math.PI * 2.5) * 22) * rightArmWave;
|
||||
|
||||
// ── Left arm — gentle idle sway ─────────────────────────────────────────
|
||||
const leftArmAngle = Math.sin((frame / fps) * Math.PI * 0.9) * 7;
|
||||
|
||||
const size = Math.min(width, height) * 0.82;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 1000 1000"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={p("ground")} cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="#000000" stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor="#000000" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
{/* Body */}
|
||||
<filter id={p("f0")} x="90.3867" y="238.634" width="765.27" height="762.131" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="17" dy="28"/><feGaussianBlur stdDeviation="10.45"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-27" dy="-22"/><feGaussianBlur stdDeviation="29.75"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Head circle */}
|
||||
<filter id={p("f1")} x="379" y="22" width="233" height="237" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="9" dy="2"/><feGaussianBlur stdDeviation="5.65"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-13"/><feGaussianBlur stdDeviation="19.7"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<filter id={p("f2")} x="423.5" y="239.5" width="153.773" height="66.8594" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
<filter id={p("f3")} x="434.977" y="217.947" width="123.535" height="57.3701" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="11.25"/>
|
||||
</filter>
|
||||
|
||||
{/* Left arm */}
|
||||
<filter id={p("f4")} x="138.461" y="555.812" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="3" dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Right arm */}
|
||||
<filter id={p("f9")} x="645" y="555.9" width="155.094" height="272.386" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1" dy="-20"/><feGaussianBlur stdDeviation="7.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.439078 0 0 0 0 0.439216 0 0 0 0 0.439216 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="e1"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/><feGaussianBlur stdDeviation="3.55"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.0229492 0 0 0 0 0.0235294 0 0 0 0 0.0235294 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="e1" result="e2"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.999" numOctaves={3} seed={8703}/>
|
||||
<feDisplacementMap in="e2" scale={8} xChannelSelector="R" yChannelSelector="G" width="100%" height="100%"/>
|
||||
</filter>
|
||||
|
||||
{/* Left eye highlights */}
|
||||
<filter id={p("f5")} x="390.216" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.65"/>
|
||||
</filter>
|
||||
<filter id={p("f6")} x="390.3" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Right open eye highlights */}
|
||||
<filter id={p("f5r")} x="570.75" y="433.891" width="25.0336" height="28.893" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.65"/>
|
||||
</filter>
|
||||
<filter id={p("f6r")} x="573.3" y="434.3" width="22.4" height="23.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.35"/>
|
||||
</filter>
|
||||
|
||||
{/* Cheek highlights */}
|
||||
<filter id={p("f7")} x="366.18" y="492.2" width="15.6352" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
<filter id={p("f8")} x="618.2" y="495.2" width="15.6352" height="13.601" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.9"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Ground shadow */}
|
||||
<ellipse cx={500} cy={978} rx={290} ry={22}
|
||||
fill={`url(#${p("ground")})`}
|
||||
transform={`scale(${1 - bob / 500}, 1)`}
|
||||
style={{ transformOrigin: "500px 978px" }}
|
||||
/>
|
||||
|
||||
{/* Everything bobs */}
|
||||
<g transform={`translate(0, ${bob})`}>
|
||||
|
||||
{/* Body */}
|
||||
<path
|
||||
d="M270.549 382.714C175.87 479.647 86.1412 654.573 127.916 829.517C145.273 881.371 165.203 911.976 222.936 941.975C253.338 957.772 327.501 950.5 375.545 921.664L445.395 890.456C490.743 873.851 509.573 876.412 538.501 889.192C577.03 910.413 587.501 931.5 649.208 964.222C729.488 1006.79 793.127 956.041 817.515 889.192C874.809 742.915 814.515 422.978 650.332 310.479C516.055 226.594 403.004 247.226 270.549 382.714Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f0")})`}
|
||||
/>
|
||||
|
||||
{/* Left arm */}
|
||||
<g transform={`rotate(${leftArmAngle}, 226, 578)`}>
|
||||
<path
|
||||
d="M257.703 773.068C271.731 736.698 272.99 728.506 287.233 709.133C299.641 692.255 259.845 627.746 226.234 577.586C219.865 568.08 205.396 568.903 199.909 578.945C176.514 621.76 137.047 694.31 143.08 742.936C156.221 848.842 228.432 842.851 257.703 773.068Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f4")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Right arm — waves after wink */}
|
||||
<g transform={`rotate(${rightArmAngle}, 712, 577)`}>
|
||||
<path
|
||||
d="M680.852 773.156C666.823 736.786 665.565 728.594 651.322 709.221C638.913 692.343 678.709 627.834 712.32 577.674C718.69 568.167 733.159 568.991 738.646 579.033C762.04 621.848 801.508 694.398 795.474 743.024C782.334 848.93 710.122 842.939 680.852 773.156Z"
|
||||
fill="#3A3A3A"
|
||||
filter={`url(#${p("f9")})`}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Head group: drift + tilt + squash */}
|
||||
<g transform={`translate(${headDx}, ${headDy}) rotate(${headTilt}, 493, 465)`}>
|
||||
<g transform={`translate(493, 145) scale(${headSquashX}, ${headSquashY}) translate(-493, -145)`}>
|
||||
|
||||
{/* Neck shadows */}
|
||||
<g opacity={0.4} filter={`url(#${p("f2")})`}>
|
||||
<path d="M450.376 270.172C464.042 264.005 502.076 255.372 544.876 270.172C598.376 288.672 415.876 288.172 450.376 270.172Z" fill="#030100"/>
|
||||
</g>
|
||||
<g opacity={0.4} filter={`url(#${p("f3")})`}>
|
||||
<path d="M533.499 245.499C524.955 248.602 489.943 257.335 463.185 249.888C429.739 240.578 555.068 236.442 533.499 245.499Z" fill="white"/>
|
||||
</g>
|
||||
|
||||
{/* Head circle */}
|
||||
<circle cx={493} cy={145} r={110} fill="#3A3A3A" filter={`url(#${p("f1")})`}/>
|
||||
|
||||
{/* Left eye — blinks periodically after wink */}
|
||||
<g transform={`translate(411, 465) scale(1, ${leftEyeScaleY}) translate(-411, -465)`}>
|
||||
<path d="M411.479 428C419.678 428 423 432 424.408 434.321C431.455 442.807 434.448 450.812 435.286 461.939C436.53 478.451 428.58 501.025 409.175 501.922C402.907 502.212 396.782 499.978 392.176 495.714C372.967 478.168 379.456 428.811 411.479 428Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f5")})`}>
|
||||
<path d="M402.588 435.31C405.111 435.115 406.117 435.015 408.224 436.218C409.447 437.699 409.293 438.305 409.365 440.116C410.178 440.625 410.896 441.111 411.693 441.647L411.902 442.956C419.012 456.194 406.032 468.295 397.002 457.028C387.107 457.791 393.025 445.603 396.043 441.344C398.036 438.531 399.867 437.302 402.588 435.31Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f6")})`}>
|
||||
<path d="M402.405 435.12C405.005 434.923 406.041 434.822 408.211 436.033C409.471 437.522 409.312 438.132 409.386 439.954C410.224 440.465 410.964 440.954 411.784 441.493L412 442.811C408.557 441.118 406.625 439.187 402.54 440.654C395.773 443.086 394.268 451.112 396.652 456.966C386.459 457.733 392.555 445.473 395.664 441.189C397.717 438.36 399.602 437.123 402.405 435.12Z" fill="#3A372F"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Right eye: open (fades out) → wink (fades in) */}
|
||||
<g opacity={openRightEyeOpacity}>
|
||||
<path d="M574.521 428C566.322 428 563 432 561.592 434.321C554.545 442.807 551.552 450.812 550.714 461.939C549.47 478.451 557.42 501.025 576.825 501.922C583.093 502.212 589.218 499.978 593.824 495.714C613.033 478.168 606.544 428.811 574.521 428Z" fill="#1C170B"/>
|
||||
<g filter={`url(#${p("f5r")})`}>
|
||||
<path d="M583.412 435.31C580.889 435.115 579.883 435.015 577.776 436.218C576.553 437.699 576.707 438.305 576.635 440.116C575.822 440.625 575.104 441.111 574.307 441.647L574.098 442.956C566.988 456.194 579.968 468.295 588.998 457.028C598.893 457.791 592.975 445.603 589.957 441.344C587.964 438.531 586.133 437.302 583.412 435.31Z" fill="#FAF3EC"/>
|
||||
</g>
|
||||
<g filter={`url(#${p("f6r")})`}>
|
||||
<path d="M583.595 435.12C580.995 434.923 579.959 434.822 577.789 436.033C576.529 437.522 576.688 438.132 576.614 439.954C575.776 440.465 575.036 440.954 574.216 441.493L574 442.811C577.443 441.118 579.375 439.187 583.46 440.654C590.227 443.086 591.732 451.112 589.348 456.966C599.541 457.733 593.445 445.473 590.336 441.189C588.283 438.36 586.398 437.302 583.595 435.12Z" fill="#3A372F"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* Wink right eye — stroke arch */}
|
||||
<g opacity={winkEyeOpacity}>
|
||||
<path
|
||||
d="M620.887 447.7L570.836 463.683C568.007 464.586 568.069 468.61 570.924 469.425L620.887 483.7"
|
||||
stroke="black"
|
||||
strokeWidth="7"
|
||||
strokeLinecap="round"
|
||||
fill="none"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Left cheek */}
|
||||
<path d="M354.002 488.785C366.292 488.07 381.734 490.477 385.001 505.019C386.026 509.579 385.143 514.363 382.556 518.257C378.409 524.432 372.217 526.795 365.337 528.245C353.923 529.158 338.873 527.064 334.774 514.24C333.375 509.718 333.887 504.821 336.192 500.686C339.888 493.968 346.962 490.735 354.002 488.785Z" fill="#F9A6A0"/>
|
||||
<g filter={`url(#${p("f7")})`}>
|
||||
<path d="M368 494C373.243 494.048 380.362 498.673 380 504C375.832 504.091 367.526 498.087 368 494Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Right cheek */}
|
||||
<path d="M626.148 494.285C641.879 485.407 671.15 495.187 664.863 516.522C657.953 539.968 605.956 533.98 615.078 505.471C615.733 503.36 618.573 499.408 620.253 497.867C621.59 496.68 624.468 495.224 626.148 494.285Z" fill="#EF928B"/>
|
||||
<g filter={`url(#${p("f8")})`}>
|
||||
<path d="M632.016 497C626.773 497.048 619.653 501.673 620.016 507C624.184 507.091 632.49 501.087 632.016 497Z" fill="#FDC3BF"/>
|
||||
</g>
|
||||
|
||||
{/* Smirk mouth */}
|
||||
<path d="M529.372 496.072C531.605 520.248 511.988 530.895 498.11 530.326C478.46 529.52 465.731 508.164 469.081 496.075C472.43 488.009 486.945 493.048 495.877 494.06C499.571 494.06 503.226 493.368 506.814 492.493C514.924 490.516 527.623 488.965 529.372 496.072Z" fill="#03050D"/>
|
||||
<path d="M518.002 516.476C508.038 503.918 489.302 508.496 481.546 516.842C479.83 518.689 480.226 521.523 482.178 523.117C492.266 531.35 506.183 531.37 517.046 523.176C519.173 521.572 519.658 518.563 518.002 516.476Z" fill="#E06B51"/>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
{/* end head group */}
|
||||
|
||||
</g>
|
||||
{/* end bob group */}
|
||||
|
||||
</svg>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
@@ -55,6 +55,21 @@ import { NewMascotCupHolding } from "./Mascot/NewMascotCupHolding";
|
||||
import { NewMascotBobateaHolding } from "./Mascot/NewMascotBobateaHolding";
|
||||
import { NewMascotSyicSmile } from "./Mascot/NewMascotSyicSmile";
|
||||
import { NewMascotSyicSmileSlow } from "./Mascot/NewMascotSyicSmileSlow";
|
||||
import { BlackMascotIdle } from "./Mascot/black-MascotIdle";
|
||||
import { BlackMascotRecording } from "./Mascot/black-MascotRecording";
|
||||
import { BlackMascotLoading } from "./Mascot/black-MascotLoading";
|
||||
import { BlackMascotPickup } from "./Mascot/black-MascotPickup";
|
||||
import { BlackMascotTalking } from "./Mascot/black-MascotTalking";
|
||||
import { BlackMascotThinking } from "./Mascot/black-MascotThinking";
|
||||
import { BlackMascotSleep } from "./Mascot/black-MascotSleep";
|
||||
import { BlackMascotLove } from "./Mascot/black-MascotLove";
|
||||
import { BlackMascotWave } from "./Mascot/black-MascotWave";
|
||||
import { BlackMascotListening } from "./Mascot/black-MascotListening";
|
||||
import { BlackMascotCrying } from "./Mascot/black-MascotCrying";
|
||||
import { BlackMascotWink } from "./Mascot/black-MascotWink";
|
||||
import { BlackMascotCelebrate } from "./Mascot/black-MascotCelebrate";
|
||||
import { BlackMascotHatWithBag } from "./Mascot/black-MascotHatWithBag";
|
||||
import { BlackMascotLaughing } from "./Mascot/black-MascotLaughing";
|
||||
|
||||
export const RemotionRoot: React.FC = () => {
|
||||
const staticFiles = getStaticFiles();
|
||||
@@ -395,6 +410,141 @@ export const RemotionRoot: React.FC = () => {
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotIdle"
|
||||
component={BlackMascotIdle}
|
||||
durationInFrames={180}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotRecording"
|
||||
component={BlackMascotRecording}
|
||||
durationInFrames={180}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotLoading"
|
||||
component={BlackMascotLoading}
|
||||
durationInFrames={Math.round(30 * 1.4 * 3)}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotPickup"
|
||||
component={BlackMascotPickup}
|
||||
durationInFrames={Math.round(30 * 4)}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotTalking"
|
||||
component={BlackMascotTalking}
|
||||
durationInFrames={180}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotThinking"
|
||||
component={BlackMascotThinking}
|
||||
durationInFrames={Math.round(30 * 6)}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotSleep"
|
||||
component={BlackMascotSleep}
|
||||
durationInFrames={Math.round(30 * 10)}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotLove"
|
||||
component={BlackMascotLove}
|
||||
durationInFrames={270}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotWave"
|
||||
component={BlackMascotWave}
|
||||
durationInFrames={180}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotListening"
|
||||
component={BlackMascotListening}
|
||||
durationInFrames={180}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotCrying"
|
||||
component={BlackMascotCrying}
|
||||
durationInFrames={300}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotWink"
|
||||
component={BlackMascotWink}
|
||||
durationInFrames={270}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotCelebrate"
|
||||
component={BlackMascotCelebrate}
|
||||
durationInFrames={270}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotHatWithBag"
|
||||
component={BlackMascotHatWithBag}
|
||||
durationInFrames={270}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
<Composition
|
||||
id="black-MascotLaughing"
|
||||
component={BlackMascotLaughing}
|
||||
durationInFrames={270}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1080}
|
||||
defaultProps={{}}
|
||||
/>
|
||||
{timelines.map((storyName) => (
|
||||
<Composition
|
||||
id={storyName}
|
||||
|
||||
Reference in New Issue
Block a user