# Grayhat Blog Tag: Design Tools

> Expanded public blog context for posts tagged Design Tools.

## Page

- [Design Tools Tag](https://grayhat.studio/blog/tag/design-tools)
- [Design Tools Tag LLM Context](https://grayhat.studio/blog/tag/design-tools/llms.txt)
- [Root LLM Context](https://grayhat.studio/blog/llms.txt)
- [Root Full LLM Context](https://grayhat.studio/blog/llms-full.txt)
- [Tag API](https://grayhat.studio/blog/api/public/v1/tags/design-tools)

## Tag Details

- Slug: `design-tools`
- Description: Not provided
- Post count in current snapshot: 2

## Current Posts

- [We've open-sourced VidXP](https://grayhat.studio/blog/vidxp-launch) - Searching through your videos has never been easier, safer and cheaper.
- [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat.studio/blog/our-struggles-and-wins-with-rive-2025) - Inspired by Duolingo, we also gave the beta Rive Editor a try to make our AI virtual friends in MindChat come alive. TLDR; It didn't go too well.

## Child Route Content

### [We've open-sourced VidXP](https://grayhat.studio/blog/vidxp-launch)

- Slug: `vidxp-launch`
- Published: 2026-08-06T15:14:58.000+05:00
- Updated: 2026-08-12T00:05:00.000+05:00
- Reading time: 4 min
- Tags: Open Source, Developer Tools, AI, Agents, Artificial Intelligence, Design Tools, Adobe, Development, LLMs, Software Engineering, Tech
- Authors: Saad Bazaz
- Visibility: public

**Grayhat is an AI software engineering company advancing next-gen tech. Previously, we researched for 2 years and open-sourced **deepdub****.** We aim to make a big impact in future tech (yes, big dreams!) and are figuring things out as we go. Most of our work is building products in Silicon Valley, and researching in next-gen technologies.Today we're open-sourcing **VidXP**, a toolkit for indexing, understanding, and searching video collections using modern multimodal AI–after two years of research and development.

Videos contain an enormous amount of information, but finding the exact moment you need is still surprisingly difficult. VidXP automatically extracting transcripts, understanding scenes, generating embeddings, and making every frame searchable through natural language.

While technology like this has existed before (e.g. **YouTube** transcripts, **Google Photos** search, and **Microsoft Video Indexer**), and great strides have been made in research in video indexing and retrieval (like Google's **VideoPrism**, **VideoCLIP**, and **InternVideo**), the race towards private and decentralized AI motivated us to build tech like VidXP for the average consumer.

Whether you're working with research datasets, security footage, recorded meetings, educational content, podcasts, or personal archives, VidXP helps transform raw video into a searchable knowledge base.

## Built for local-first AI workflows

Unlike many cloud-based video analysis platforms, VidXP is designed to run locally. Your videos remain under your control while leveraging state-of-the-art open models for speech recognition, semantic understanding, and retrieval.

The project can be used as:

- A Python library
- A command-line interface
- A REST API
- An MCP server for AI assistants

This makes it easy to integrate into existing applications or use directly from developer tools like Claude Desktop, Cursor, or any MCP-compatible client.

*## Spare the gibberish... What can VidXP do?

*VidXP combines multiple AI capabilities into a single indexing pipeline.*

What does this mean?

First, it processes your video (yes, that may take a while).

Then, you can start searching within those videos.

For example, you can simply ask:

**"Find where a red car appears."or

**"Show me where the presenter explains vector databases."VidXP returns the most relevant moments, as timestamps within that video.

(For nerds) How does VidXP do all the above? During processing, it will:

- Extract accurate transcripts
- Generate semantic embeddings
- Perform natural-language search across videos
- Retrieve precise timestamps for matching moments
- Index large video collections
- Serve search results through an API or CLI

## Designed for...

### Humans and AI

VidXP is available as a desktop app and an MCP Server for AI Agents (*What is an MCP Server?*).

Some people have used it to find certain events in their wedding videos, while others use it in their daily video editing workflow. Do let us know what use cases you come up with!

**We're planning to release a Premiere Pro plugin based on VidXP. If you're interested, comment "Premiere Pro plz".### Developers

VidXP is intentionally modular.

You can embed it into your own applications, automate indexing pipelines, integrate it with retrieval systems, or expose your media archive to LLM-powered agents. Because it supports multiple interfaces, the same indexing engine can power local scripts, backend services, desktop tools, and AI workflows.

You can pick and choose the modules (we call them "collectors"), and can choose to plug your own SLM (Small Language Model) instead of the one we use.

Whether you're building media management software, research tooling, enterprise knowledge systems, or personal archives, VidXP provides the foundation for semantic video retrieval.

## Standing on the shoulders of giants

VidXP wouldn't exist without the incredible open-source ecosystem that came before it. Rather than reinventing foundational AI models, we focused on building the glue that brings them together into a seamless developer experience.

Under the hood, VidXP builds upon state-of-the-art work from organizations including **OpenAI**, **Anthropic**, **Google DeepMind**, **Microsoft**, **Meta AI**, **Alibaba**, **Nomic AI**, **BAAI**, **Hugging Face**, and the countless researchers and open-source contributors who continue advancing machine learning.

Depending on your configuration, VidXP leverages technologies such as:

- **Whisper** and **WhisperX** for speech recognition and word-level alignment.
- **PySceneDetect** for automatic scene detection.
- **OpenCV** and **FFmpeg** for video processing.
- **CLIP**, **OpenCLIP**, and **SigLIP** for multimodal vision-language understanding.
- **BGE** and **Nomic Embed** for semantic embeddings.
- **Sentence Transformers** for embedding pipelines.
- **Transformers** for running modern multimodal models.
- **FAISS** and **Chroma** for vector search and retrieval.

Our goal has never been to replace these incredible projects. Instead, VidXP aims to make them easier to combine, deploy, and use together—whether from a Python library, CLI, REST API, or MCP server.

If VidXP saves you hours of engineering, it's because thousands of researchers, engineers, and open-source contributors spent years building the technologies it stands upon.

This project was built in Grayhat's collaboration with NED University of Engineering & Technology, under Grayhat's Student Research program, supervised by Dr Shahab Tahzeeb, and executed by students Muhammad Haroon, Sarah Jawaid, Talha Ahmed, and Abdullah Mansoor.

To everyone behind these models, libraries, datasets, and frameworks: **thank you**. ❤️

## Available today

VidXP is available now, here:

GitHub - grayhatdevelopers/vidxp: VidXP (Video eXPlain) - Video Indexing Engine. Search in videos in natural language. 👀 Connect your Hermes / Claude / OpenClaw agents, allow them to understand videos with low token cost.VidXP (Video eXPlain) - Video Indexing Engine. Search in videos in natural language. 👀 Connect your Hermes / Claude / OpenClaw agents, allow them to understand videos with low token cost. - grayhat…*GitHubgrayhatdevelopers*(you can download the desktop app from our Releases page)

If you've ever wished you could search your videos as easily as searching documents, give it a try—we're excited to see what you build with it.

### [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat.studio/blog/our-struggles-and-wins-with-rive-2025)

- Slug: `our-struggles-and-wins-with-rive-2025`
- Published: 2025-11-06T14:00:03.000+05:00
- Updated: 2025-11-19T23:03:41.000+05:00
- Reading time: 5 min
- Tags: Animation, Design, AI, Artificial Intelligence, Flutter, Developer Tools, Design Tools
- Authors: Saad Bazaz, Abdurrehman Subhani, Aniqa Sadaf, Talal Ahmed Khan, Wasif Sadiq, Muhammad Usama Rashid
- Visibility: public

Grayhat first met the Rive team at GDC 2024. Early startup energy, cool booth, tons of hype. At the time, we already knew about Rive, but we hadn’t actually battle-tested it in any real production scenario. It looked promising, and we filed it away as a “maybe one day” tool.

*Fast forward to this year... We finally decided to give it a real shot.

## **Solly, Our First Rive Experiment**

Our first test was simple. We built an animated mascot named **Solly** for MindChat. Just a cute, lively animation. It turned out pretty solid.

*An animated Solly, the mascot for MindChat.In our hubris, we decided to go big. Not just animated characters. We wanted **full lip-sync and animated avatars reacting in real-time during video calls**.

That’s when our rabbit hole journey began.

## **Research and Learnings**

To understand what “good” looks like, we researched teams already doing this at scale.

We studied Duolingo’s approach to visemes and character speech, which instantly made them our north star. We also pored over Guido Rosso's breakdown of how Duolingo uses GenAI and Rive for more technical insight. It's an excellent blend of art and tech, I highly recommend watching it:

*For character structure and workflow inspiration, we found Tolan’s process incredibly useful, detailed in their post on designing their character.

We also dove into the broader concepts of phonemes and visemes, looking at established solutions in the 3D space like Reallusion's iClone for AI-powered lip-sync.

Enough theory, let's build.

## **Intersecting art and tech (Rive + Flutter)**

To get hands-on, we learned the basics through foundational tutorials like this Rive in Flutter video and this more advanced follow-up. Community tips, like this Reddit thread on a better way to animate, and the official Rive best practices guide were essential reading.

Then we got our hands dirty by running our first interactive test. We replaced the Interacting Bear Demo from GitHub with the Monster Mouth (found on the Rive Marketplace), and lipsynced it.

*At this point, we were feeling pretty confident. We started exploring Rive's marketplace for rigs, especially mouth rigs and lip-sync templates:

- Mouth Movement Rig
- Custom Talking Avatar Lip Sync
- Karaoke with Zari
- Monster Mouth
- Wave, Hear and Talk
- Mouth Rig

We built our own character in a flat, simple style so iteration would be fast.

## **Nested Artboard Hell**

Then came the pain. Nested artboards. Calling inputs inside nested rigs from the parent board. This should have been trivial, as most of our designers came from an Adobe After Effects and Sony Vegas background. Instead it became a multi-day excavation.

We even built a minimal reproducible Rive file just to understand the problem first, with data binding and nested artboards.

We searched everywhere for answers. We scoured Stack Overflow for solutions, read through Reddit threads where users lamented broken nested animations, and followed a critical GitHub issue in the rive-flutter repository that highlighted our exact problem. The Rive community forum had a thread on passing input values that never got a definitive answer.

Finally, we found a random deep-internet video that solved it. From Rive, but not on the surface. Not from official docs. Just some obscure YouTube video that succeeded where the actual product failed to explain itself.

*And that’s when it hit me.

Rive is not designed for professionals yet.

Rive is built for early adopters, vibers, Behance-Dribbble motion designers, landing page razzle dazzle, and social media loops. Not structured engineering-grade animation pipelines.

Anyone doing real character systems will eventually hit architecture problems. Rive isn’t there yet.

But we were too deep in this to give up.

## **Building Our Own Playground**

Once we finally got our rig working, we wanted to test it with our custom lip-sync algorithm.

We tried using the third-party playground, rive.rip. Cool idea, but feature-limited. Not useful for live algorithmic testing.

So we built our own playground in Flutter, specifically for real-time lip-sync with AI voices and Rive characters. You can find the source code for our Rive Playground on GitHub.

And here is the deployed version you can play with:

  *
  Drag to resize ⤡

  Open in new tab

(function(){
  var box = document.getElementById('rive-resize');
  var iframe = box.querySelector('iframe');
  var handle = document.getElementById('rive-resize-handle');
  var minW = 200, minH = 200;

  // If Ghost gives width:100% (or if you want it to *look* full-width initially),
  // set a pixel width equal to the parent's computed width so the element can be resized.
  function setInitialWidth() {
    try {
      var pw = box.parentElement.clientWidth || document.documentElement.clientWidth;
      // Use parent's width but not less than minW
      box.style.width = Math.max(minW, Math.min(pw, 700)) + 'px';
    } catch(e) { /* ignore */ }
  }

  // Initialize
  setInitialWidth();

  // Recompute if window changes (keeps sensible starting width)
  window.addEventListener('resize', setInitialWidth);

  var dragging = false;

  function startDrag(e) {
    e.preventDefault();
    dragging = true;
    // allow mouse events to reach document while still interacting with iframe
    iframe.style.pointerEvents = 'none';
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
    window.addEventListener('touchmove', onDrag, { passive: false });
    window.addEventListener('touchend', stopDrag);
  }

  function onDrag(e) {
    if (!dragging) return;
    e.preventDefault();
    var clientX = (e.touches && e.touches[0]) ? e.touches[0].clientX : e.clientX;
    var clientY = (e.touches && e.touches[0]) ? e.touches[0].clientY : e.clientY;
    var rect = box.getBoundingClientRect();
    var newW = Math.max(minW, clientX - rect.left);
    var newH = Math.max(minH, clientY - rect.top);
    box.style.width = newW + 'px';
    box.style.height = newH + 'px';
  }

  function stopDrag() {
    dragging = false;
    iframe.style.pointerEvents = '';
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
    window.removeEventListener('touchmove', onDrag);
    window.removeEventListener('touchend', stopDrag);
  }

  handle.addEventListener('mousedown', startDrag);
  handle.addEventListener('touchstart', startDrag, { passive: false });

  // optional: double-click handle to snap back to parent's width
  handle.addEventListener('dblclick', setInitialWidth);
})();

## **Final Result**

We managed to make our animation work, with nested artboards and lip-sync. Check it out here:

*It's still a work-in-progress, but we continue to learn and improve.

## **The Rive Reality Check**

After this entire journey, here’s the honest breakdown.

### **The Cons**

- The interface is unintuitive and tries too hard to cosplay as Figma without earning it.
- Features like components and preview mode feel half-baked.
- Pricing is preposterous, especially when they suddenly made exports paid mid-project.
- Performance is unoptimized and multiplayer is buggy.
- Browser sync pauses make it feel clunky instead of modern.

### **The Pros**

- It works, at least in Beta terms.
- Web-based.
- Collaborative.
- Fun for simple animation use cases.

### **My Verdict**

If you already have working pipelines in Blender, After Effects, Spline, or your own tooling, stick with them. Rive is cool, but it is not ready for serious production beyond funky assets, splash animations, and loading screens.

I still believe Rive should eventually be acquired by Figma and merged into a full pipeline. But if I see them pull a “we’ll stay independent forever” move like Figma did with Adobe, my remaining hope will evaporate.

To anyone from the Rive team: If you're reading this, I'd love to talk and have a feedback session on our team's experience on the Paid plan. Maybe we can find a better way out!

Peace ✌️

*Credits to:*

- Umayma binte Saleem, our Web, Interactions and Graphics intern, for the first Solly animation
- Ayesha Aamir (UI/UX Designer) for her research, character design and animation implementation
- AbdurRehman Subhani (Lead Engineer) for building the open source Playground, and developing the lip sync algorithm with AI
- Aniqa Sadaf (Product Designer) for world-building