Folio: Portrait Profile Cards
Two styles of animated portrait profile cards for React: a team-card trio with share and add-to-contacts actions and a spotlight card with stats and follow button.
Try it live
The real demo, running in a sandbox. Switch the screen size to see how it adapts.
About this item
Folio gives you two ready-made ways to present people. The first is a row of tall portrait cards with name, role, a share button and an add-to-contacts action; the second is a spotlight card with a layered portrait, followers and projects stats and a follow action. Both animate softly on hover with Framer Motion.
Two card styles
Use the trio for team, speaker or creator grids and the spotlight card for a single featured profile, portfolio or about section.
Hover motion that feels premium
Cards lift, images shift and actions reveal with smooth Framer Motion transitions; everything is plain React and CSS.
Features
- ✓Trio of portrait profile cards
- ✓Spotlight profile card with stats
- ✓Share and add-to-contacts actions
- ✓Follower and project counters
- ✓Hover lift and reveal animations
- ✓Framer Motion powered
- ✓Data-driven card array
- ✓Plain CSS, no UI framework
What's included
Full JavaScript source code,package.jsonwith locked dependencies, Vite config, RVT.ai README with setup and customisation guide,LICENSEandTHIRD-PARTY-NOTICES.md. Nonode_modules: runnpm installonce.
Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.
Perfect for
- Team and about pages
- Speaker and creator line-ups
- Portfolio and freelancer sites
- Social and community apps
From download to production
- Download Folio: Portrait Profile Cards from your account and unzip it.
- Run
npm install, thennpm run devto open it locally. - Swap in your brand colours, copy and data (see the README customisation guide).
- Run
npm run buildand deploy thedist/folder to any static host.
Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.
Choose the license for your project
A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.
Features
- Trio of portrait profile cards
- Spotlight profile card with stats
- Share and add-to-contacts actions
- Follower and project counters
- Hover lift and reveal animations
- Framer Motion powered
- Data-driven card array
- Plain CSS, no UI framework
Files included
- Full source code (React + Vite)
- README.md
- LICENSE (RVT.ai)
- THIRD-PARTY-NOTICES.md
- package.json + package-lock.json
Version 1.0.0 and changelog
Version 1.0.0
Initial RVT.ai release.