We spend a lot of time thinking about backend security,auth, encryption, access control.
But there’s a simple gap on the frontend:
If something is visible on screen, it can be captured with a phone.
There’s no reliable way on the web to prevent that. At best, you can try to block screenshots or disable interactions, but none of that works against an external camera.
I wanted to explore a different direction.
The idea
Instead of trying to block access, I experimented with how text is rendered.
The key observation is that human vision and cameras behave differently:
Humans perceive continuous motion (persistence of vision)
Cameras capture discrete frames
So I tried rendering text in a way that stays readable to the human eye but doesn’t translate cleanly into individual frames.
What I built
A small library called secure-render-text.
It uses a combination of:
rapid frame alternation
layered character rendering
subtle visual inconsistencies
The goal isn’t to hide the text, but to make captured output less clean and less reliable.
Where this might be useful
Internal dashboards with sensitive data
SaaS tools where screen leakage is a concern
Exam or assessment interfaces
Situations where you want to reduce casual capture
Git Hub : https://github.com/tmlganesh/npm-package_secure-render-text
NPM : https://www.npmjs.com/package/secure-render-text