125 elements · 3D icons and mockups · hand-inked illustrations · animated backgrounds · pure canvas

Every animated component library is React-only.
These aren't.

A JavaScript animation library with zero dependencies: 62 shaded 3D icons and mockups (T-shirt, book, box, laptop, phone, robot) you can drag a full 360° and whose text you edit as plain strings, plus animated backgrounds, particle fields, 3D text and UI pieces. Drop them into Webflow, WordPress, Astro, Svelte or plain HTML. No framework, no build step, no dependencies, no per-use fees.

12 elements free, two of them 3D icons · one-time payment · License terms · 14-day refund

0live elements
0dependencies
0CDN requests
3client sites in production
49 · Globe · connection arcs · live

3D icons, mockups and animated backgrounds

Every card below is running live. Filter by what it is, or by where it goes on a site.

Use it as

One price. Every element.

Start with the 12 free ones. When you want the rest, it is a single payment with lifetime updates.

An alternative to Magic UI, Aceternity and React Bits for sites that are not React

Those libraries are excellent, and they only ship React components. OneOcean Elements ships standalone canvas snippets.

Does it work in Webflow?

Yes. Paste the snippet into an Embed element or the page's custom code. Every element is one script and one canvas tag, so Webflow animations do not need Lottie, GSAP or a plugin.

Does it work in WordPress?

Yes. Use a Custom HTML block or the theme's footer scripts. There is no plugin to install and no build step.

Are the 3D icons real 3D?

Yes. Each one is a real mesh with depth, lit per pixel by the WebGL that every browser already ships, with a plain 2D canvas fallback. No Three.js, no GLB files, no library to load: a single self-contained script of about 40 KB per icon.

Can visitors rotate them?

Yes. Every 3D icon and mockup tilts toward the cursor and can be dragged a full 360 degrees, with inertia, on mouse and touch. Double-click brings it back to the front. It is built into the snippet; there is nothing to configure.

Can I change the text on them?

Yes. The card number and holder, the laptop and phone screens, the bag print, the cap patch, the coin legend, the chart labels and the 3D letters are plain strings at the top of each file, drawn with the font your page already uses. Change the string, reload, done.

Can I use them as an animated background?

Yes. Backgrounds, particle fields and noise effects are made to sit behind a hero or a section. They pause when off screen and respect reduced-motion settings.

What does "lifetime" mean?

Your license never expires: everything delivered to you is yours to keep using, even if we ever stop selling the collection. Updates are free for as long as the collection is maintained, with no fixed schedule. The plain-language details are in the terms.

What do I get when I buy?

All 125 elements as standalone HTML files, a license in your name, lifetime updates and use on your own and client projects. Delivered by email, usually within minutes.