Services Work Demos Blog About Contact
Capability Demo Design × Development — Custom Animation Showcase · Parama Technologies
← Back to All Demos
Parama Technologies · Design × Development

Where design meets motion meets code.

We build experiences that tell stories — through custom animation, editorial illustration, and engineering that makes it all move.

See the Story →
Scroll to explore
Hover Interactions
We believe technology should feel human. Every pixel is a decision. Every animation is a conversation between the product and its user. We build systems that are purposeful, products that are beautiful, and stories that are impossible to forget.

Hover over the coloured words

4G Connected 142 Villages Brightpath Foundation — Impact Dashboard 2024 Beneficiaries 12,450 Villages 142 Programs 6 Volunteers 340
Scene 1 of 4
A village. A dream.
Process
How we took a nonprofit from spreadsheets to a live dashboard
A real case: 12,000 beneficiaries, 284 field reports, 6 programs — visualised and live in 8 weeks.
Week 1–2
Discovery & Audit
Mapped all existing data sources — 4 spreadsheets, 3 Google Forms, WhatsApp field reports. Identified gaps and deduplication issues.
Data Architecture
Week 3–4
Pipeline Design
Built n8n automation workflows to ingest field submissions, clean and validate, then push to a central PostgreSQL database on Digital Ocean.
n8n · PostgreSQL
Week 5
Dashboard Design
Vinod designed the visual language — data cards, colour system, icon set. Parama built the Metabase implementation with custom CSS.
Metabase · Design
Week 6–7
Field Form & Training
Deployed a mobile-friendly field submission form. Trained 48 volunteers in 2 sessions. Created a plain-English operations manual.
Training · Docs
Week 8
Live & Handed Over
System went live. 284 reports filed in week 1. Zero technical support calls needed. The team runs it independently today.
🟢 Live Since Dec 2024
Design × Development

Development
+ Design
= Complete

Most agencies offer one or the other. Parama combines senior graphic design capability with engineering execution so your product looks exceptional and works perfectly.

Brand Identity Film & Event Posters Pitch Decks Magazine Layout Annual Reports Logo Design Podcast Cover Art Impact Infographics Print & Tabloids
SG
Senior Graphic Designer
Brand Systems · Editorial Design · Presentation Design
See graphic design ↗
// Recent Work Samples
Film
Poster & Press Kit
Investor
Crafted Pitch Deck
Editorial
Magazine & Tabloid
Identity
Logo & Podcast Art
→ Explore graphic design service
Animation Toolkit
What we can do with pure CSS + JS
No heavy frameworks. No video files. Everything below is built with code — fast, accessible, and endlessly customisable.
Impact
Text Scramble Effect
Pure JS · CSS · Hover
SVG Path Drawing
SVG stroke-dashoffset · IntersectionObserver
Staggered Grid Animation
CSS animation-delay · Hover
🌿
3D Parallax Layers
CSS transform · Mouse tracking
0
Beneficiaries
Animated Counter
requestAnimationFrame · Easing
We build for
nonprofits
Morphing Text Loop
JS setInterval · CSS transitions

Let's build something
beautiful together.

Design + development + storytelling. One team. One conversation.

Start a Conversation →

Parama Technologies — Design × Development capabilities

Fractional CTO · Custom Builds · Design Partnerships · Nonprofit Specialists

← All Demos Contact Us