Naetharu Codes

UI Examples

Some examples of fun UI elements I've created

Flip Cards

Hover over the card to see it flip around and reveal more information.

Front Title

Some text on the front

Back Title

Some more text on the back of the card that the user can read once it has been flipped

Paralax Scroll

Scroll down to see the text move with paralax over the background image

A Window into Another World

Scroll down to see the parallax effect

SVG Animations

Using the Flubber library, we can morph SVGs smoothly. Press the button below to cycle between the different shapes.

Responsive Grid Layout

A flexible and responsive grid layout. Adjust the page width to see the containers reposition to best fit the display.

Item 1

This is the content for item 1

Item 2

This is the content for item 2

Item 3

This is the content for item 3

Item 4

This is the content for item 4

Item 5

This is the content for item 5

Item 6

This is the content for item 6

Animated Text

Fun text animations that add some spark to your page. Using GSAP JS to create interesting animations.

Full Stack

React

Express

Astro

CSS

MUI

Tailwind

SQL

Azure

Animation...

Animated Components

Adding some animations to components can elevate a page and make it really stand out.
Radial Menu
Linear Menu
Vertical Menu
Button with Liquid Effect Button with Cyberpunk glitch effect - hover over it to see the effect in action. Button with a neon glow that carries on that Cyberpunk feel. Button that creates a particle burst when clicked. Note how the particles are different each time. A retro gaming themed button based on the NES console. Feeling Retro? Some Popout Tabs
React
Astro
Custom CSS
Express
Tailwind
Custom Radio Buttons Version of the Tabs
A Mophing Alert Menu

CSS Art

Please use desktop mode to view the CSS art. Due to the absolute positioning it's not responsive. Viewing in mobile using landscape will activate it.