Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
JavaScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192// SO SOFT + Pals side identity for Social Software reels.// Extends the shared AC stamp language with the two-box mark prototyped in// prompt.mjs: SO and SOFT remain separate outlined objects, joined by a live// line that changes posture rather than becoming a static sponsor bug.
import { createCanvas, registerFont } from "canvas";import { resolve } from "node:path";import { makeSideStamps } from "./side-stamps.mjs";
export async function makeSosoftSideIdentity({ w, h, fps, frames, assetsDir } = {}) { try { registerFont(resolve("slab/menuband/Sources/MenuBand/Resources/ywft-processing-bold.ttf"), { family: "YWFT Processing", weight: "bold", }); } catch {}
const pals = await makeSideStamps({ w, h, fps, frames, assetsDir, title: "SCORES FOR SOCIAL SOFTWARE", edgeX: 78, stampSize: 128, titlePx: 58, charScale: 0.48, leftCy: h * 0.78, rightCy: h * 0.22, speed: 0.14, });
const mark = createCanvas(360, 150); const m = mark.getContext("2d"); let spring = 0, velocity = 0;
function renderMark(t, env) { const dt = 1 / fps; velocity += (28 * (env - spring) - 8 * velocity) * dt; spring += velocity * dt; m.clearRect(0, 0, mark.width, mark.height); m.font = "bold 42px YWFT Processing, Arial"; m.textBaseline = "middle"; m.textAlign = "center"; m.lineJoin = "round";
const phase = Math.floor(t / 4.5) % 3; const drift = Math.sin(t * 0.75) * 5; const boxes = phase === 0 ? [{ text: "SO", x: 38, y: 54 + drift, w: 76 }, { text: "SOFT", x: 188, y: 54 - drift, w: 134 }] : phase === 1 ? [{ text: "SO", x: 106 + drift, y: 20, w: 76 }, { text: "SOFT", x: 106 - drift, y: 88, w: 134 }] : [{ text: "SO", x: 32, y: 18 + drift, w: 76 }, { text: "SOFT", x: 188, y: 82 - drift, w: 134 }]; const a = boxes[0], b = boxes[1]; const cyA = a.y + 27, cyB = b.y + 27;
// Cyan/magenta ghosts bind the SO SOFT mark to the Pals reel chrome. for (const [dx, color, alpha] of [[-3, "#ff3c78", .34], [3, "#46aaff", .34], [0, "#fffdf3", 1]]) { m.globalAlpha = alpha; m.strokeStyle = color; m.fillStyle = color; m.lineWidth = dx === 0 ? 3 : 5; m.beginPath(); m.moveTo(a.x + a.w + dx, cyA); const midX = (a.x + a.w + b.x) / 2 + dx; m.bezierCurveTo(midX, cyA + Math.sin(t * 2) * 11, midX, cyB - Math.sin(t * 2) * 11, b.x + dx, cyB); m.stroke(); for (const box of boxes) { m.strokeRect(box.x + dx, box.y, box.w, 54); m.fillText(box.text, box.x + box.w / 2 + dx, box.y + 29); } } m.globalAlpha = 1; }
function draw(ctx, t, env = 0, tint = null) { pals.draw(ctx, t, env, tint); renderMark(t, env); const pulse = 1 + spring * 0.12; const y = h * 0.51 + Math.sin(t * 0.55) * 22; for (const side of [-1, 1]) { ctx.save(); ctx.translate(side < 0 ? 26 : w - 26, y); ctx.rotate(side < 0 ? Math.PI / 2 : -Math.PI / 2); ctx.scale(pulse, pulse); ctx.globalAlpha = 0.92; ctx.drawImage(mark, -180, -75); ctx.restore(); } ctx.globalAlpha = 1; }
return { draw };}