I built a UI that destroys itself. Type your name, and Zoro uses Santoryu to slice the DOM elements apart. Just hope he doesn’t get lost on the way.
I used AI tools, specifically NanoBanana, to enhance the images used in this project.
i am going to add some features to the website and some optimization to it , some times the ui gets lags.
Log in to leave a comment
For this project, I created a ‘Borked UI’ experience where the interface gets physically sliced apart by Zoro from One Piece. I built it entirely with vanilla JavaScript and CSS, utilizing clip-path to fragment the DOM elements in real-time. My favourite feature is the ‘lost’ mechanic—I programmed a 10% RNG chance for the animation to fail, staying true to the character’s lore. This project really helped me appreciate the power of native CSS animations and improved my understanding of state logic in interactive web apps.
i have updated the cursor in the website to a sword style ( Shusui ) , look at this demo https://broked-ui.vercel.app/
Log in to leave a comment
i just deployed the website in vercel , still some things need to change , i will ship this project tomorrow .
this is the demo link https://broked-ui.vercel.app/
you can also try this easter eggs like
Log in to leave a comment
i am deploying the website on vercel , i am also submitting this project in borked website .
wish me good luck ;)
Log in to leave a comment
i am working on this one piece themed , borked UI , still on development.
Log in to leave a comment
i made a prototype of the website , check it out below , still in the deployment .
Log in to leave a comment
I’m working on this project! This is so exciting. I can’t wait to share more updates as I build.
Log in to leave a comment