feat(typed effect): add fall typed effect (@d1rshan)

[d1rshan]

tumble.mp4

This PR adds a new typed effect called fall.

When a correctly submitted word becomes typed, it creates a temporary animated clone that falls off the screen while the original word is hidden. Incorrect submitted words stay in place so error feedback remains visible.

This PR also introduces a dedicated typed-effects module for typed effects that need JavaScript behavior, so effect-specific logic does not have to live directly in test-ui.

also addresses #7847, makes sure fall works for reduced motion.

[Copilot]

Pull request overview

Adds a new tumble typed effect for the test page, with a JS-driven animation that spawns a falling clone of correctly typed words while hiding the original word.

Changes:

• Extend typed effect config schema + settings UI to include tumble.
• Add a new frontend/src/ts/test/typed-effects.ts module to host JS-driven typed effects (currently tumble).
• Wire typed effect lifecycle into test-ui (trigger on word typed, clear on show/finish) and add corresponding SCSS + keyframes.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/schemas/src/configs.ts	Adds tumble to TypedEffectSchema enum.
frontend/src/ts/test/typed-effects.ts	Implements JS behavior for tumble (clone + fall animation + cleanup).
frontend/src/ts/test/test-ui.ts	Hooks typed-effects into word-typing flow and clears clones/styles on lifecycle events.
frontend/src/styles/test.scss	Adds typed-effect-tumble hiding rule + .tumble-clone animation styling.
frontend/src/styles/animations.scss	Adds @keyframes typedEffectTumble.
frontend/src/html/pages/settings.html	Adds tumble button to typedEffect settings.

[Miodec]

Tumble makes me think the words would spin. I think rename to 'fall'?

[d1rshan]

hey mio, i updated it to 'fall'.

[Miodec]

Maybe instead of having to define the animation via css we could use animejs for this? Also, the color of the fall clone is incorrect when using colorful mode or flip test colors.

[d1rshan]

hey @Miodec, i am not very familiar with animejs and i did try doing it with ai but the effect feels bit weird with animejs and since rest of the typed effects use css i think it's just cleaner to keep this effect as css too ? if u still insist, i can move the effect to animejs.

and i fixed the fall-clone color in modes affecting word colors.

[fehmer]

Well, the other effects use just CSS and no JavaScript. It is already a special case.

[d1rshan]

Well, the other effects use just CSS and no JavaScript. It is already a special case.

okay, will do it.

[d1rshan]

updated to animejs, works almost the same now. works in flip colors and colorful mode too.