---
title: "Investment ROI Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Joel Kazadi · Cards. Premium interactive yield engine"
canonical: "https://framer.elliotli.dev/component/investment-roi-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Investment ROI Card

# Investment ROI Card

Premium interactive yield engine

[View on Framer](https://framer.com/marketplace/components/investment-roi-card/?via=elliot-li)

![Investment ROI Card preview image 1](https://framer.elliotli.dev/og/component/investment-roi-card/bff5f152980389ed/1600x1200.jpg)

## Summary

Premium interactive yield engine

## Description

Premium Investment ROI Visualizer

Transform static financial data into an interactive visual experience.

Vraxis Yield is a premium ROI visualization component designed for modern landing pages, financial dashboards, SaaS platforms, and business websites. The component allows users to explore investment scenarios through responsive sliders, dynamic calculations, and live visual feedback.

Every control updates instantly, creating a smooth and engaging user experience while maintaining a clean, professional presentation.

## Features

### Interactive ROI Calculations

Adjust investment variables and instantly view updated projections, capital allocation totals, and growth estimates.

### Dynamic Ratio Visualization

A responsive visual ratio bar displays the relationship between invested capital and projected growth, helping users understand outcomes at a glance.

### Responsive Interface

Built to adapt seamlessly across desktop, tablet, and mobile layouts.

### Theme Adaptive Design

Automatically inherits your Framer project's color variables, typography settings, borders, and styling preferences.

### Accessible Controls

Includes keyboard-friendly sliders and accessibility-conscious interaction patterns.

### Optimized Performance

Designed with lightweight interactions and efficient update logic to maintain a smooth user experience.

## Recommended Layout Settings

For the best results:

**Width**

-   Set the component width to **Fill** or **100%**
    

**Height**

-   Set the component height to **Fit Content**
    

These settings ensure the component scales correctly across different breakpoints and layout structures.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7133

## Details

- **Author**: Joel Kazadi
- **Published**: 2026-06-05
- **Updated**: 2026-06-16
- **Added**: 2026-05-30
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards