A living reference of UI components, animations and interactions. All built with vanilla HTML, CSS and JavaScript.
Buttons · Hover effectsScroll animations and Fade inAccordions · TabsProgress bars and CountersInputs and TooltipsToasts and TogglesTyping effect and MarqueeButtons · Hover effectsScroll animations and Fade inAccordions · TabsProgress bars and CountersInputs and TooltipsToasts and TogglesTyping effect and Marquee
01 — Buttons
Button styles & interactions.
Six variants covering solid fills, outlines, animated sweep, arrow hover, and a tactile press state.
02 — Cards
Hover card effects.
Cards that lift on hover with a border and shadow transition. Works for services, features, or portfolio items.
Service
Web Design
Clean responsive layouts built for every screen size.
Service
Development
Fast semantic HTML and CSS with vanilla JavaScript.
Service
Maintenance
Ongoing updates, bug fixes, and performance work.
03 — Scroll animations
Fade in on scroll.
Elements animate into view as the user scrolls, staggered with a delay for a natural cascading feel.
01
Discovery & planning
02
Design & wireframes
03
Build & test
04
Launch & maintain
04 — Typing effect
Animated typewriter text.
A typewriter that cycles through words. Great for hero sections and taglines.
We build websites that are
05 — Accordion
Expandable content.
Clean expand and collapse for FAQs, service listings, or any content that benefits from progressive disclosure.
Typically 2 to 4 weeks depending on scope, number of pages, and how quickly feedback is provided.
Yes. Every site is built mobile-first — designed for phones first and scaled up for tablets and desktops.
Absolutely. Sites can be set up with a simple CMS so you can update text and images without touching any code.
Yes — maintenance packages are available for bug fixes, content updates, and performance monitoring after launch.
06 — Progress bars
Animated skill bars.
Bars that animate in on scroll. Useful for skills sections, fundraising goals, or campaign progress.
HTML & CSS95%
JavaScript80%
Responsive Design90%
Git & Version Control75%
07 — Tabs
Tabbed content.
Switch between panels without a page reload. Great for services, case studies, or product details.
Every project starts with a conversation. We talk through what you need, what you already have, and what success looks like for your organization.
Discovery, Design, Build, Test, Launch. Each phase has a clear deliverable and a check-in point so there are no surprises at the end.
Pricing is scoped per project. A simple five-page site starts at $800. Larger builds with custom functionality are quoted after the discovery call.
08 — Counters
Animated number counters.
Numbers that count up on scroll. A strong visual device for stats, impact numbers, or milestones.
0
Projects delivered
0
Client satisfaction
0
Years experience
09 — Form inputs
Animated input fields.
A subtle underline animation on focus. Clean and minimal for contact forms and sign-ups.
10 — Misc
Tooltips, toggles & toasts.
Small but polished interactions covering hover tooltips, smooth toggle switches, and pop-up notifications.
Images load only when scrolled into view
Designed for small screens first, then scaled up
Removes whitespace from CSS and JS to reduce file size