Motion & effects / CSS text effects
Colorion Text Effects
Give a short headline a controlled visual treatment.
Understand the resource
What it is.
Colorion’s text-effect library provides CSS examples and recreation prompts. Its documentation describes token-based colors and reduced-motion handling, which still need checking after an effect is adapted.
When it is useful
A short marketing headline needs emphasis while body copy remains quiet.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Try one reveal on a short title, preserve the complete accessible text, and compare the reduced-motion rendering.
Result to aim for
A readable title with a nonessential effect.
Before you start
What you need.
- CSS implementation and a way to verify accessible text and motion settings.
The practical boundaries
What to watch for.
- Blur, splitting and repeated decorative letters can impair reading or screen-reader output.
- Publisher reduced-motion claims were not independently tested; check the chosen snippet in context.
Review record
What we could establish.
- Public primary documentation and the bounded account-free checks below were reviewed. The Borealis CSS sample rendered clipped gradient text locally. Its animation continued after reduced motion was requested, leaving one unmet motion-suppression expectation.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
The Borealis CSS sample rendered clipped gradient text locally. Its animation continued after reduced motion was requested, leaving one unmet motion-suppression expectation.
Methods: Public HTTP response · Public browser sample · Local package fixture. A completed check covers the stated sample; it is not a safety certification.
- Target
- colorion-text-effects first public CSS sample
- Version or capture
- unversioned generated sample
- Integrity scope
- sha256:a05960a4f7b3cd5270f645d7922df710a8109d27a42a9b417d172f5967fa386b
Test conditions
- Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
- Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.
- Synthetic local inputs only. Package/skill source inspected before execution; no install lifecycle scripts run.
- Local package/CSS browser fixtures block real network. Variate additionally uses Node filesystem permissions and a no-network preload.
Individual checks and observations
Public document and DOM
passPublic browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay
Observed: HTTP 200; 70 captured button labels; 0 inputs; 0 canvases.
CSS sample generation
passPublic browser sample: Open first CSS disclosure and inspect code or captured copy output; system clipboard is not written
Observed: Captured 842 UTF-8 bytes; SHA256 a05960a4f7b3cd5270f645d7922df710a8109d27a42a9b417d172f5967fa386b. This verifies disclosed/generated output, not OS clipboard permission.
Text-effect render
passLocal package fixture: Inspect gradient clipping and active CSS animation
Observed: {"animations": 1, "clip": "text", "color": "rgba(0, 0, 0, 0)"}
Reduced-motion boundary
failLocal package fixture: Switch prefers-reduced-motion to reduce and count this sample animation
Observed: {"runningAfterReduce": 1, "interpretation": "A remaining animation is an unmet motion-suppression expectation for this copied sample, not a full-library verdict."}
Security findings and boundaries
Passive inspection of the public response headers, requested hosts and the named browser sample. Also inspected pinned source and the specified synthetic fixture outputs. No active exploitation, authenticated permissions test or complete security audit.
Observed · concern
The copied animation does not stop for reduced motion
The inspected sample defines an infinite animation without a reduced-motion branch. The local fixture still had one running animation after the preference changed.
Practical caveats
- Add a static reduced-motion style and a readable text fallback before using the effect in a headline.
- Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.
What remains untested
- One sample only; no forced-colors, print, contrast or complete collection test. No remote font was loaded.
- Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.
Security limits
- No authenticated workspace, private content, production backend permissions or data-retention verification.
- One sample only; no forced-colors, print, contrast or complete collection test. No remote font was loaded.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring