banna بنّاHandmade clay mug
Orange glaze, made in a small workshop.
$24
MRAn open source script by Mohammadreza Rokhbin
Your page, built in front of your visitors.
A crew of cursors builds your site piece by piece: drawing boxes, typing text and clicking buttons into place. The first screen builds right away, the rest as you scroll.
On any site
A shop, a blog or a sign-up page
banna works out by itself which parts are boxes, which are text and which are buttons. You don't need to mark anything.
Why simple sites get noticed
A page that opens fast and says one thing clearly keeps its visitors. Three simple ideas to start with.
Read moreNewsletter
One email a month, no ads.
Use it
Just one line
banna is one file, with no dependencies and no build step. It doesn't need a framework either.
-
1
Put this line in your <head>
Ideally before your stylesheets, without defer or async.
<script src="https://cdn.jsdelivr.net/gh/Rokhbin/banna@1/banna.js"></script> -
2
That's it. Open your page
If you'd rather host the file yourself, take banna.js from GitHub and change the address.
| Option | Default | What it does |
|---|---|---|
data-speed | 1 | Build speed. Higher is faster. |
data-agents | 8, or 4 on phones | Number of cursors. |
data-once="session" | off | Play once per browser session. |
data-colors | seven colors | Cursor colors, separated by commas. |
data-banna-skip | Put it on any part, and banna leaves it alone. |
Safe to use
It doesn't break anything
Your text is never rewritten
It only hides and reveals. Search engines still read the whole page.
Nothing is sent anywhere
No trackers, and no requests to other sites.
Nobody is kept waiting
Visitors can skip with the button or Esc, and it never runs for people who ask for reduced motion.
If it fails, your page is still there
Whatever goes wrong, the page appears in full right away.
Author