I’m Anže, a frontend dev experimenting with UI components.
Interactive Encrypted Data Preview A simple component that adds a bit of mystery to your UI. It shows off hidden or encrypted data in a cool way—think animated numbers in the background and an interactive eye that reacts when you hover over it. Built with SVG animations and Canvas for smooth, dynamic effects.
<GridMatrixPresentation />
I got inspired by Nitish Khagwal’s work and decided to rebuild it in React. While impelemting the component i learned some new tricks with the Canvas API playing around with ‘quadraticCurveTo’ for smoother drawing.
<SignCard />
Just experimenting with Amazon’s hover interaction—specifically, the way it creates a small buffer zone for the mouse before triggering the dropdown. It’s a subtle but effective way to improve usability and make navigation feel more natural.
<HoverDropdownSection />
Experimenting with different ways to display maps in the UI, focusing on both functionality and visual appeal. I’m also playing around with React Motion to animate card shapes, aiming for a dynamic user experience.
<MapMessage
message={JSON.stringify({
type: "FeatureCollection",
features: []
})}
/>
Just working on a chat interface for my AI app, integrated into another project. The LLM is disabled for now to keep costs down while I refine the UI and functionality. The chat also supports rendering Markdown in real-time as the data streams in.
const LLMChat = () => {
const { messages, addMessage } = useOllama();
return (
<div className="flex flex-col w-full relative p-2">
<ChatList
messages={messages}
fetchMore={async () => {
return [];
}}
hasMore={false}
/>
<div className="h-40"></div>
<div className="absolute">
<ChatInput
onMessage={(message, files
) => {
addMessage(message, files);
}}
/>
</div>
</div>
);
};
Experimenting with different shading techniques on buttons to make them look more realistic. I’m tweaking shadow properties like blur, offset, and opacity—to see what gives depth.
<Button>Click me</Button>
Experimenting with a toast component, trying out different animation styles. Built this one mostly with vanilla CSS and JavaScript to keep it lightweight and flexible.
<Toast
title="Toast component"
description="Toast message"
/>
Trying to recreate a realistic leather texture on card designs. Playing with subtle details to give it that premium, tactile feel.
<Card
cardNumber="3782 8224 6310 004"
cardHolder="xxxx"
cardBrand="AMEX"
/>
Played around with this design because I love the color palette from JoJo Part 9. Along the way, I learned how to use clip-path and mix-blend-mode super useful for quick, creative image transformations.
<JoJoLand>
<JojoItems />
</JoJoLand>