@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/TypoAnimated/animations/scatterLines.jsx

@@ -0,0 +1,126 @@
+import styled from "styled-components";
+import { Flex } from "../../Flex";
+import { Typo } from "../../Typo";
+import { AnimationSlot } from "../tools/AnimationSlot";
+import {
+    pseudo,
+    parseMultilineText,
+    buildWordEntries,
+    TIGHT_LINE_HEIGHT,
+} from "../tools/animationUtils";
+
+const FADE_MS = 420;
+
+const WordShell = styled.span`
+    display: inline-block;
+    line-height: ${TIGHT_LINE_HEIGHT};
+    vertical-align: baseline;
+    font-size: ${({ $fontSize }) => $fontSize};
+    opacity: ${({ $opacity }) => $opacity};
+    transition:
+        opacity ${FADE_MS}ms ease,
+        font-size ${FADE_MS}ms ease;
+`;
+
+const wordFontSizePct = (seed) => `${Math.round(80 + pseudo(seed) * 40)}%`;
+
+const ScatterLinesLines = ({
+    lines,
+    entries,
+    step,
+    color,
+    typoProps,
+    ghost = false,
+}) => {
+    const visibleKeys = new Set(
+        entries.slice(0, step + 1).map((e) => `${e.lineIndex}-${e.wordIndex}`),
+    );
+
+    return (
+    <Typo.span lineHeight={TIGHT_LINE_HEIGHT} color={color} {...typoProps}>
+        <Flex.column gap={0} style={{ lineHeight: TIGHT_LINE_HEIGHT }}>
+            {lines.map((line, lineIndex) => {
+                const words = line.split(/\s+/).filter(Boolean);
+
+                return (
+                    <Flex
+                        key={lineIndex}
+                        gap={4}
+                        wrap
+                        style={{ lineHeight: TIGHT_LINE_HEIGHT }}
+                        alignItems="baseline"
+                    >
+                        {words.map((word, wordIndex) => {
+                            const key = `${lineIndex}-${wordIndex}`;
+                            const seed = lineIndex * 1000 + wordIndex;
+                            const fontSize = ghost ? "120%" : wordFontSizePct(seed);
+                            const targetOpacity = 0.7 + pseudo(seed + 2) * 0.3;
+
+                            const visible = ghost || visibleKeys.has(key);
+
+                            return (
+                                <WordShell
+                                    key={key}
+                                    $fontSize={fontSize}
+                                    $opacity={visible ? (ghost ? 1 : targetOpacity) : 0}
+                                >
+                                    <Typo.span
+                                        color={color}
+                                        lineHeight={TIGHT_LINE_HEIGHT}
+                                        weight={pseudo(seed + 1) > 0.5 ? 600 : 400}
+                                        content={word}
+                                    />
+                                </WordShell>
+                            );
+                        })}
+                    </Flex>
+                );
+            })}
+        </Flex.column>
+    </Typo.span>
+    );
+};
+
+export default {
+    id: "scatterLines",
+    createPlan: ({ text, duration }) => {
+        const lines = parseMultilineText(text);
+        const entries = buildWordEntries(lines);
+        const totalSteps = Math.max(1, entries.length);
+        const refreshTime = Math.max(80, Math.floor(duration / totalSteps));
+
+        return {
+            totalSteps,
+            chunk: 1,
+            refreshTime,
+            lines,
+            entries,
+            charCount: text.length,
+        };
+    },
+    getFrame: ({ step, plan, color, typoProps }) => ({
+        mode: "custom",
+        node: (
+            <AnimationSlot
+                ghost={
+                    <ScatterLinesLines
+                        lines={plan.lines}
+                        entries={plan.entries}
+                        step={plan.entries.length - 1}
+                        color={color}
+                        typoProps={typoProps}
+                        ghost
+                    />
+                }
+            >
+                <ScatterLinesLines
+                    lines={plan.lines}
+                    entries={plan.entries}
+                    step={step}
+                    color={color}
+                    typoProps={typoProps}
+                />
+            </AnimationSlot>
+        ),
+    }),
+};

package/src/libs/TypoAnimated/animations/scrambleReveal.js

@@ -0,0 +1,10 @@
+import { buildScramblePlan, buildScrambleText } from "../tools/animationUtils";
+
+export default {
+    id: "scrambleReveal",
+    createPlan: ({ text, duration }) => buildScramblePlan(text, duration),
+    getFrame: ({ text, step, plan }) => ({
+        mode: "text",
+        text: buildScrambleText(text, step, plan),
+    }),
+};

package/src/libs/TypoAnimated/animations/stackedWords.jsx

@@ -0,0 +1,219 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { Flex } from "../../Flex";
+import { Typo } from "../../Typo";
+import { generateRandom } from "../../generateRandom";
+import { AnimationSlot } from "../tools/AnimationSlot";
+import { parseMultilineText, buildWordEntries, TIGHT_LINE_HEIGHT } from "../tools/animationUtils";
+
+const FS_MIN = 80;
+const FS_MAX = 120;
+const OP_MIN = 0.7;
+const OP_MAX = 1;
+
+const randFontSize = () => generateRandom.number(FS_MIN, FS_MAX, 0, true);
+const randOpacity = () => generateRandom.number(OP_MIN, OP_MAX, 2, true);
+
+const createWordState = (fromFs, fromOp) => ({
+    fromFs: fromFs ?? randFontSize(),
+    fromOp: fromOp ?? randOpacity(),
+    toFs: randFontSize(),
+    toOp: randOpacity(),
+});
+
+const WordShell = styled.span`
+    display: inline-block;
+    line-height: ${TIGHT_LINE_HEIGHT};
+    vertical-align: middle;
+    font-size: ${({ $fs }) => $fs}%;
+    opacity: ${({ $op }) => $op};
+    transition: ${({ $transition }) => $transition};
+`;
+
+const WordCell = ({ state, playing, halfMs, color, content }) => {
+    const [display, setDisplay] = useState({
+        fs: state.fromFs,
+        op: state.fromOp,
+    });
+    const [transition, setTransition] = useState("none");
+
+    useLayoutEffect(() => {
+        if (!playing) {
+            setDisplay({ fs: state.toFs, op: state.toOp });
+            setTransition("none");
+            return;
+        }
+
+        setDisplay({ fs: state.fromFs, op: state.fromOp });
+        setTransition("none");
+
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setDisplay({ fs: state.toFs, op: state.toOp });
+                setTransition(
+                    `font-size ${halfMs}ms ease-in-out, opacity ${halfMs}ms ease-in-out`,
+                );
+            });
+        });
+    }, [playing, state.fromFs, state.fromOp, state.toFs, state.toOp, halfMs]);
+
+    return (
+        <WordShell $fs={display.fs} $op={display.op} $transition={transition}>
+            <Typo.span
+                color={color}
+                lineHeight={TIGHT_LINE_HEIGHT}
+                weight={700}
+                content={content}
+            />
+        </WordShell>
+    );
+};
+
+const buildInitialStates = (lines) => {
+    const states = {};
+    lines.forEach((line, lineIndex) => {
+        line.split(/\s+/).filter(Boolean).forEach((word, wordIndex) => {
+            states[`${lineIndex}-${wordIndex}`] = createWordState();
+        });
+    });
+    return states;
+};
+
+const StackedWordsLines = ({
+    lines,
+    wordStates,
+    halfMs,
+    step,
+    color,
+    typoProps,
+    ghost = false,
+}) => {
+    const playing = !ghost && step % 2 === 0;
+
+    return (
+        <Typo.span lineHeight={TIGHT_LINE_HEIGHT} color={color} whiteSpace="pre-wrap" {...typoProps}>
+            <Flex.column gap={0} style={{ lineHeight: TIGHT_LINE_HEIGHT }}>
+                {lines.map((line, lineIndex) => {
+                    const words = line.split(/\s+/).filter(Boolean);
+
+                    return (
+                        <Flex
+                            key={lineIndex}
+                            gap={4}
+                            wrap
+                            style={{ lineHeight: TIGHT_LINE_HEIGHT }}
+                            alignItems="center"
+                        >
+                            {words.map((word, wordIndex) => {
+                                const key = `${lineIndex}-${wordIndex}`;
+
+                                if (ghost) {
+                                    return (
+                                        <Typo.span
+                                            key={key}
+                                            color={color}
+                                            lineHeight={TIGHT_LINE_HEIGHT}
+                                            weight={700}
+                                            size="120%"
+                                            content={word}
+                                        />
+                                    );
+                                }
+
+                                const state = wordStates[key];
+                                if (!state) return null;
+
+                                return (
+                                    <WordCell
+                                        key={key}
+                                        state={state}
+                                        playing={playing}
+                                        halfMs={halfMs}
+                                        color={color}
+                                        content={word}
+                                    />
+                                );
+                            })}
+                        </Flex>
+                    );
+                })}
+            </Flex.column>
+        </Typo.span>
+    );
+};
+
+const StackedWordsAnimated = ({ lines, halfMs, step, color, typoProps }) => {
+    const [wordStates, setWordStates] = useState(() => buildInitialStates(lines));
+    const prevStepRef = useRef(step);
+
+    useLayoutEffect(() => {
+        if (step === 0 && prevStepRef.current === 1) {
+            setWordStates((prev) => {
+                const next = { ...prev };
+                Object.keys(next).forEach((key) => {
+                    const w = next[key];
+                    next[key] = createWordState(w.toFs, w.toOp);
+                });
+                return next;
+            });
+        }
+        prevStepRef.current = step;
+    }, [step]);
+
+    return (
+        <StackedWordsLines
+            lines={lines}
+            wordStates={wordStates}
+            halfMs={halfMs}
+            step={step}
+            color={color}
+            typoProps={typoProps}
+        />
+    );
+};
+
+export default {
+    id: "stackedWords",
+    defaultLoop: true,
+    createPlan: ({ text, duration }) => {
+        const lines = parseMultilineText(text);
+        const entries = buildWordEntries(lines);
+        const cycleMs = Math.max(800, duration);
+        const halfMs = Math.max(200, Math.floor(cycleMs / 2));
+
+        return {
+            totalSteps: 2,
+            chunk: 1,
+            refreshTime: halfMs,
+            lines,
+            entries,
+            charCount: text.length,
+            cycleMs,
+            halfMs,
+        };
+    },
+    getFrame: ({ step, plan, color, typoProps }) => ({
+        mode: "custom",
+        node: (
+            <AnimationSlot
+                ghost={
+                    <StackedWordsLines
+                        lines={plan.lines}
+                        wordStates={{}}
+                        color={color}
+                        typoProps={typoProps}
+                        ghost
+                    />
+                }
+            >
+                <StackedWordsAnimated
+                    lines={plan.lines}
+                    halfMs={plan.halfMs}
+                    step={step}
+                    color={color}
+                    typoProps={typoProps}
+                />
+            </AnimationSlot>
+        ),
+    }),
+};

package/src/libs/TypoAnimated/animations/typewriter.js

@@ -0,0 +1,10 @@
+import { buildRevealPlan, sliceRevealText } from "../tools/animationUtils";
+
+export default {
+    id: "typewriter",
+    createPlan: ({ text, duration }) => buildRevealPlan(text, duration),
+    getFrame: ({ text, step, plan }) => ({
+        mode: "text",
+        text: sliceRevealText(text, step, plan),
+    }),
+};

package/src/libs/TypoAnimated/index.jsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import { TypoAnimatedBase } from "./tools/Base";
+import { resolveAnimation } from "./tools/animationRegistry";
+import { useAnimations } from "./tools/useAnimations";
+import { autoDuration, resolveDuration } from "./tools/autoDuration";
+
+export const TypoAnimated = forwardRef(function TypoAnimated(props, _ref) {
+    return <TypoAnimatedBase {...props} />;
+});
+
+TypoAnimated.displayName = "TypoAnimated";
+
+export { useAnimations, resolveAnimation, autoDuration, resolveDuration };
+export default TypoAnimated;

package/src/libs/TypoAnimated/tools/AnimationSlot.jsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+const Root = styled.div`
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: top;
+`;
+
+const Ghost = styled.div`
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+`;
+
+const Layer = styled.div`
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    min-width: 100%;
+    overflow: visible;
+`;
+
+export const AnimationSlot = ({ ghost, children }) => (
+    <Root>
+        <Ghost aria-hidden="true">{ghost}</Ghost>
+        <Layer>{children}</Layer>
+    </Root>
+);
+
+export default AnimationSlot;

package/src/libs/TypoAnimated/tools/Base.jsx

@@ -0,0 +1,71 @@
+import { Typo } from "../../Typo";
+import useAnimations from "./useAnimations";
+import { resolveAnimation } from "./animationRegistry";
+import { AnimationSlot } from "./AnimationSlot";
+
+export const TypoAnimatedBase = (props = {}) => {
+    const {
+        variant = "typewriter",
+        duration,
+        loop,
+        useTimerProps = {},
+        children,
+        content,
+        contentGroup,
+        color,
+        ...typoProps
+    } = props;
+
+    const animation = resolveAnimation(variant);
+    const resolvedLoop =
+        animation.defaultLoop === true
+            ? true
+            : loop !== undefined
+              ? loop
+              : true;
+
+    const typoCommon = { ...typoProps, ...(color != null ? { color } : {}) };
+    const resolvedColor = typoCommon.color;
+
+    const { frame, sourceText } = useAnimations({
+        variant,
+        duration,
+        loop: resolvedLoop,
+        useTimerProps,
+        content,
+        children,
+        color: resolvedColor,
+        typoProps: typoCommon,
+    });
+
+    if (contentGroup?.length) {
+        return contentGroup.map((item, index) => (
+            <TypoAnimatedBase
+                key={index}
+                variant={variant}
+                duration={duration}
+                loop={resolvedLoop}
+                useTimerProps={useTimerProps}
+                content={item}
+                color={color}
+                {...typoProps}
+            />
+        ));
+    }
+
+    if (frame?.mode === "custom") {
+        return frame.node;
+    }
+
+    const displayText = frame?.text ?? sourceText;
+
+    return (
+        <AnimationSlot
+            ghost={<Typo {...typoCommon} content={sourceText} whiteSpace="pre-wrap" />}
+        >
+            <Typo {...typoCommon} content={displayText} whiteSpace="pre-wrap" />
+        </AnimationSlot>
+    );
+};
+
+export default TypoAnimatedBase;

package/src/libs/TypoAnimated/tools/animationRegistry.js

@@ -0,0 +1,20 @@
+import typewriter from "../animations/typewriter";
+import scrambleReveal from "../animations/scrambleReveal";
+import animatedWriter from "../animations/animatedWriter";
+import scatterLines from "../animations/scatterLines";
+import stackedWords from "../animations/stackedWords";
+
+const registry = {
+    typewriter,
+    scrambleReveal,
+    animatedWriter,
+    scatterLines,
+    stackedWords,
+};
+
+export const resolveAnimation = (variant = "typewriter") => {
+    const key = String(variant);
+    return registry[key] ?? typewriter;
+};
+
+export const animationIds = Object.keys(registry);

package/src/libs/TypoAnimated/tools/animationUtils.js

@@ -0,0 +1,112 @@
+
+export const TIGHT_LINE_HEIGHT = 0.8;
+
+export const buildRevealPlan = (
+    text,
+    duration,
+    {
+        maxLetterSteps = 48,
+        minChunkSteps = 14,
+        maxChunkSteps = 28,
+        minStepMs = 24,
+    } = {},
+) => {
+    const len = Math.max(0, text?.length ?? 0);
+    if (len === 0) {
+        return { totalSteps: 1, chunk: 1, refreshTime: duration, charCount: 0 };
+    }
+
+    let chunk = 1;
+    let totalSteps = len;
+
+    if (len > maxLetterSteps) {
+        totalSteps = Math.min(
+            maxChunkSteps,
+            Math.max(minChunkSteps, Math.round(duration / 90)),
+        );
+        chunk = Math.ceil(len / totalSteps);
+        totalSteps = Math.ceil(len / chunk);
+    }
+
+    const refreshTime = Math.max(minStepMs, Math.floor(duration / totalSteps));
+
+    return {
+        totalSteps,
+        chunk,
+        refreshTime,
+        charCount: len,
+    };
+};
+
+export const sliceRevealText = (text, step, plan) => {
+    if (!text) return "";
+    const { chunk = 1, charCount = text.length } = plan || {};
+    const visible = Math.min(charCount, Math.max(0, (step + 1) * chunk));
+    return text.slice(0, visible);
+};
+
+export const resolveTextSource = (children, content) => {
+    if (children != null && children !== "") return String(children);
+    if (content != null && content !== "") return String(content);
+    return "";
+};
+
+export const resolveAnimatedWriterWhiteSpace = (text) =>
+    String(text ?? "").includes("\n") ? "pre-wrap" : "nowrap";
+
+export const pseudo = (seed) => {
+    const x = Math.sin(seed * 12.9898) * 43758.5453;
+    return x - Math.floor(x);
+};
+
+export const buildScramblePlan = (text, duration, options) => {
+    const base = buildRevealPlan(text, duration, options);
+    if (!base.charCount) return base;
+
+    const totalSteps = base.totalSteps + 1;
+    const refreshTime = Math.max(24, Math.floor(duration / totalSteps));
+
+    return { ...base, totalSteps, refreshTime, scramble: true };
+};
+
+export const getRevealCorrectCount = (step, plan) => {
+    if (!plan?.scramble) {
+        return Math.min(plan?.charCount ?? 0, Math.max(0, (step + 1) * (plan?.chunk ?? 1)));
+    }
+    if (step <= 0) return 0;
+    return Math.min(plan.charCount, step * (plan.chunk ?? 1));
+};
+
+const scrambleChar = (index, char, text) => {
+    if (!/[a-zA-Z]/.test(char)) return char;
+    const upper = char === char.toUpperCase();
+    const pool = upper ? "ABCDEFGHIJKLMNOPQRSTUVWXYZ" : "abcdefghijklmnopqrstuvwxyz";
+    const seed = (text?.charCodeAt(0) ?? 0) * 31 + index * 17 + (text?.length ?? 0);
+    return pool[Math.floor(pseudo(seed) * pool.length)];
+};
+
+export const buildScrambleText = (text, step, plan) => {
+    if (!text) return "";
+    const correct = getRevealCorrectCount(step, plan);
+    let out = "";
+    for (let i = 0; i < text.length; i++) {
+        out += i < correct ? text[i] : scrambleChar(i, text[i], text);
+    }
+    return out;
+};
+
+export const parseMultilineText = (text) =>
+    String(text || "")
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean);
+
+export const buildWordEntries = (lines) => {
+    const entries = [];
+    lines.forEach((line, lineIndex) => {
+        line.split(/\s+/).filter(Boolean).forEach((word, wordIndex) => {
+            entries.push({ lineIndex, wordIndex, word, seed: lineIndex * 1000 + wordIndex });
+        });
+    });
+    return entries;
+};

package/src/libs/TypoAnimated/tools/autoDuration.js

@@ -0,0 +1,49 @@
+import { buildWordEntries, parseMultilineText } from "./animationUtils";
+
+const clamp = (ms, min, max) => Math.max(min, Math.min(max, ms));
+
+const countWords = (text) => {
+    const lines = parseMultilineText(text);
+    if (!lines.length) return 0;
+    return buildWordEntries(lines).length;
+};
+
+const letterSteps = (text) => {
+    const len = Math.max(0, text?.length ?? 0);
+    if (len === 0) return 1;
+    if (len <= 48) return len;
+    const chunkSteps = Math.min(28, Math.max(14, Math.round(len / 4)));
+    return Math.ceil(len / Math.ceil(len / chunkSteps));
+};
+
+const calculators = {
+    typewriter: (text) => {
+        const steps = letterSteps(text);
+        if (steps <= 48) return clamp(steps * 55, 400, 8000);
+        return clamp(steps * 120, 1200, 12000);
+    },
+    scrambleReveal: (text) => {
+        const steps = letterSteps(text) + 1;
+        if (steps <= 49) return clamp(steps * 55, 450, 8000);
+        return clamp(steps * 120, 1300, 12000);
+    },
+    animatedWriter: (text) => {
+        const steps = letterSteps(text);
+        if (steps <= 48) return clamp(steps * 70, 500, 9000);
+        return clamp(steps * 140, 1400, 14000);
+    },
+    scatterLines: (text) => clamp(countWords(text) * 200, 600, 10000),
+    stackedWords: (text) => clamp(2200 + countWords(text) * 80, 2000, 8000),
+};
+
+export const autoDuration = (variant, text) => {
+    const calc = calculators[variant] ?? calculators.typewriter;
+    return calc(String(text ?? ""));
+};
+
+export const resolveDuration = (variant, text, duration) => {
+    if (duration != null && Number.isFinite(Number(duration))) {
+        return Number(duration);
+    }
+    return autoDuration(variant, text);
+};