62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T15a9,

Bring your own design

Most file upload components force you to work around a built-in UI. FileInput doesn't have one. Instead, it exposes five state slots — Idle, Dragging, Uploading, Success, and Error — where you connect your own designed frames. Your component, your brand, your pixels. The logic just works underneath.

-------------------------------------------------------------

6 cloud providers. Zero backend required.

FileInput connects directly to the storage provider of your choice — no server, no middleware, no DevOps:

⚡ Public (tmpfiles.org) — Get uploading in seconds during prototyping. Files auto-delete after 1 hour so you're never cluttering storage.
Cloudinary — The industry favourite for media. Paste your cloud name and upload preset and you're done.
Supabase — Full Postgres + storage in one. Paste your project URL, anon key, and bucket name.
Google Drive — Upload files straight to a Drive folder via a Google Apps Script endpoint. Great for client-facing tools and internal dashboards.
Cloudflare R2 — S3-compatible, globally distributed, and priced with no egress fees. Point it at your Worker URL.
Uploadcare — Powerful CDN with built-in transformations. Add your public key and go.

Switching providers is a single dropdown change in the Framer panel. No code edits required.

---------------------------------------------------

Built for real products

FileInput isn't a prototype toy — it's production-ready out of the box:

Drag and drop with live state feedback on your designed frames
Real-time upload progress tracked per file via XHR, reflected instantly in your UI
File type filtering — toggle allowed types (JPG, PDF, MP4, ZIP, and 30+ more) from the panel. No typing MIME strings.
File size limits — set a max in MB with a simple slider
Multi-file uploads — enable with one toggle. Each file tracked independently.
Validation errors surfaced clearly before any upload attempt
Native form integration — a hidden input carries uploaded URLs straight into Framer's form submission payload. No custom wiring.

----------------------------------------------------

Live text overrides — no code

Apply the built-in overrides to any text layer on your canvas to display live upload data:

File name and formatted file size
Upload progress as a percentage
Error messages (validation and network)
The final uploaded URL
A progress bar override that animates width automatically
A variant switcher that flips your component's variant to match the upload state

Your text layers stay fully styled. The overrides only replace the content.

--------------------------------------------------------

How to set up in 3 steps

Drop FileInput onto your canvas. A placeholder guides you until slots are connected.
Connect your designed frames to the Idle, Dragging, Uploading, Success, and Error slots in the right panel.
Choose a provider from the dropdown, paste in your credentials, and publish.

That's it. No npm. No custom code. No reading documentation for an hour.

Need more detail? The full documentation is here → — covering every provider setup, override usage, form integration, and common troubleshooting scenarios.

-------------------------------------------------------

Who it's for

Freelancers and agencies building client portals, intake forms, and onboarding flows
SaaS founders who need a polished upload experience without building one from scratch
No-code builders who want real cloud storage without touching a line of backend code
Designers who refuse to compromise on how their upload UI looks

---------------------------------------------------

What's included

Full FileInput component with all upload logic
6 preconfigured cloud provider integrations
7 text and variant overrides ready to apply
30+ file type toggles in the property panel
Framer-native form field support
Canvas placeholder for editor guidance

Live Preview · Documentation

Stop stitching together upload workarounds. FileInput ships the hard part — you just design around it.

64:T14d6,

Details

Create interactive, physics-based node layouts in Framer using your own layers as draggable nodes.This component automatically connects all nodes to a primary node, adds smooth spring motion, prevents chaotic overlap, and keeps the layout feeling alive and responsive.

It’s ideal for:

Relationship maps
Portfolio skill maps
Team / org visualizations
Site navigation experiments
Interactive storytelling
Product ecosystem diagrams

Unlike static graph layouts, this component feels playful, tactile, and alive — while still staying visually controlled.-----------------------------------------------

How It Works

The first node in your Nodes list becomes the primary / central node
Every other node connects to it automatically
Nodes can be dragged freely
When released, they settle naturally using spring-based motion
Nodes gently avoid overlapping
If dragged too far outside the frame, they glide back in
Hovering a node dims unrelated nodes and lines for better focus

-----------------------------------------------

How To Use

1. Add the component to your canvas

Drop the component into your Framer project and size the frame however you like.

2. Add your node layers

Use the Nodes property to insert your own Framer layers/components.

Each item can be:

text cards
buttons
tags
icons
mini content blocks
custom UI cards

3. Arrange node priority

The first node in the list is treated as the main node.All other nodes connect to it automatically.

4. Publish / preview

The graph will automatically initialize, settle into place, and become interactive.

-----------------------------------------------

Included Interactions

Draggable Nodes

Users can click and drag any node freely.

Physics-Based Motion

Nodes move with soft spring behavior for a natural, fluid feel.

Smart Collision Spacing

Nodes resist getting too close and gently push apart.

Hover Focus

Hovering over a node:

keeps the hovered node fully visible
keeps the primary node fully visible
keeps the connecting line visible
dims unrelated nodes and lines

Soft Boundary Behavior

Nodes can visually move beyond the frame edge, but they are gently pulled back in instead of getting harshly clipped.

-----------------------------------------------

Customizable Properties

Nodes

Add and reorder your custom node layers.

Background Color

Sets the background of the graph container.

Line Color

Controls the connector line color.

Line Opacity

Adjusts how visible the connector lines are.

Line Width

Controls connector stroke thickness.

Dim Opacity

Controls how faded non-hovered nodes/lines become on hover.

Spring Length

Controls how far nodes tend to sit from the primary node.

Spring Strength

Controls how tightly the graph holds together.

Damping

Controls how quickly motion settles after movement.

-----------------------------------------------

Best Practices

Use consistent card sizes for a cleaner visual rhythm
Keep the primary node visually stronger than the rest
Works best with 4–12 nodes
Leave enough empty space around the graph for motion
Use hover dimming to create guided exploration

-----------------------------------------------

Good Use Cases

This component works especially well for:

About pages
- skills, tools, strengths, roles
Portfolio case studies
- process maps, systems, frameworks
Startup / product sites
- ecosystem or feature relationships
Interactive storytelling
- concepts, themes, character maps
Navigation experiments
- playful sitemap-style interfaces

-----------------------------------------------

Notes

This component is designed for interaction-first layouts, not strict data visualization
Node positions are physics-driven, so layouts will feel organic rather than rigid
Best used when you want a graph that feels alive, not mechanical

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-72406c5b-eb57-4fe8-a22c-20d8aee6f952-all:/unified/creator/72406c5b-eb57-4fe8-a22c-20d8aee6f952/activity/":[{"data":[{"id":"01a01e6b-819b-7246-b877-ad7fcea0c9ba","type":"comment.liked","target":{"type":"comment","id":"01a01e15-f8c0-770d-8f30-cdbe5019bd26","preview":"Nice","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nice"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a00e11-25cf-7119-91d4-0596824f45e9","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a01e15-f8c0-770d-8f30-cdbe5019bd26"},"repost":null}},"context":{"type":"post","id":"01a00e11-25cf-7119-91d4-0596824f45e9","preview":"Hunar.ai","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0d-6ff2-73e0-99ba-a80f8a1245c1.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a00e11-25cf-7119-91d4-0596824f45e9","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","slug":"nitin-sangwan","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-20T09:05:57.137Z","latestAt":"2026-08-20T09:05:57.137Z"},{"id":"01a01734-9c42-748b-9bee-f0c6944cd8b0","type":"comment.liked","target":{"type":"comment","id":"01a00e38-81b5-7218-b3fe-0cd40f5ad540","preview":"This is really clean, Nitin. The color-coded scenes for Hiring, Onboarding, and Training (that blue to purple to olive shift) do a lot of quiet work: they turn an abstract voice-AI product into three concrete moments instead of one fuzzy one, and the little in-card UI vignettes sell each stage. One small idea: carry those same three hues into the Products section and the deeper pages, so the mental model you set at the top keeps paying off as people scroll. Strong build.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This is really clean, Nitin. The color-coded scenes for Hiring, Onboarding, and Training (that blue to purple to olive shift) do a lot of quiet work: they turn an abstract voice-AI product into three concrete moments instead of one fuzzy one, and the little in-card UI vignettes sell each stage. One small idea: carry those same three hues into the Products section and the deeper pages, so the mental model you set at the top keeps paying off as people scroll. Strong build."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a00e11-25cf-7119-91d4-0596824f45e9","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a00e38-81b5-7218-b3fe-0cd40f5ad540"},"repost":null}},"context":{"type":"post","id":"01a00e11-25cf-7119-91d4-0596824f45e9","preview":"Hunar.ai","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0d-6ff2-73e0-99ba-a80f8a1245c1.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a00e11-25cf-7119-91d4-0596824f45e9","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","slug":"nitin-sangwan","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-18T23:28:38.970Z","latestAt":"2026-08-18T23:28:38.970Z"},{"id":"01a00e76-8e44-70c6-8a12-005bdd8e227a","type":"site.created","target":{"type":"site","id":"16955","preview":"Nitin's Portfolio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e76-06aa-761f-b637-fa4c9ecf6cd9.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","slug":"nitin-sangwan","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-08-17T06:44:05.828Z","latestAt":"2026-08-17T06:44:05.828Z"},{"id":"01a00e11-2c54-759b-aad2-f244cf39886d","type":"site.created","target":{"type":"site","id":"16954","preview":"Hunar.ai","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0d-6ff2-73e0-99ba-a80f8a1245c1.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","slug":"nitin-sangwan","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-08-17T04:53:21.620Z","latestAt":"2026-08-17T04:53:21.620Z"},{"id":"019ef32b-3bd5-7651-aa44-09e5659d7944","type":"comment.reply","target":{"type":"post","id":"019df7be-135b-751d-ad13-80f6b4c82c72","preview":"File Input","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ABFbHkoQZatxHaBX3VPA/file-input-hwjzkztEFt0K9iTKnjyfoxWXkI4Ra2","targetDeleted":false,"owned":true,"actions":{"postId":"019df7be-135b-751d-ad13-80f6b4c82c72","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ef32b-3bbb-743a-a43d-d5d0c8e13f24","preview":"Hi, this component sends files as a link, along with your form responses. All files are also stored in the storage provider of your choice, and can directly be access from there as well.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi, this component sends files as a link, along with your form responses. All files are also stored in the storage provider of your choice, and can directly be access from there as well."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019df7be-135b-751d-ad13-80f6b4c82c72","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019eee0f-5715-76f4-afe4-d68c8e0681aa"},"repost":null}},"actors":[{"id":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","slug":"nitin-sangwan","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-23T06:29:17.397Z","latestAt":"2026-06-23T06:29:17.397Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:72406c5b-eb57-4fe8-a22c-20d8aee6f952:/unified/posts/?creator=72406c5b-eb57-4fe8-a22c-20d8aee6f952&with=reposts":[{"data":[{"id":"01a00e76-8be6-7148-8ad1-dac1283d2ce8","title":null,"body":"

Nitin's Portfolio.

A product designer who cares about what people use, understand, and remember. Currently designing AI-driven workforce management tools for frontline teams at Hunar.ai.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nitin's Portfolio."}]},{"type":"paragraph","content":[{"type":"text","text":"A product designer who cares about what people use, understand, and remember. Currently designing AI-driven workforce management tools for frontline teams at "},{"type":"text","text":"Hunar.ai","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://Hunar.ai","target":"_blank"}}]},{"type":"text","text":"."}]}]},"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"16955","resolved":true,"title":"Nitin's Portfolio","body":"

Nitin's portfolio.

A product designer who cares about what people use, understand, and remember. Currently designing AI-driven workforce management tools for frontline teams at Hunar.ai.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nitin's portfolio."}]},{"type":"paragraph","content":[{"type":"text","text":"A product designer who cares about what people use, understand, and remember. Currently designing AI-driven workforce management tools for frontline teams at "},{"type":"text","text":"Hunar.ai","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://Hunar.ai","target":"_blank"}}]},{"type":"text","text":"."}]}]},"introduction":"","slug":"nitin-s-portfolio","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e76-06aa-761f-b637-fa4c9ecf6cd9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e76-0e7c-72ad-93b2-b0ca251a04da.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e76-171f-7759-b203-33d898046d1b.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e76-1e15-75eb-8768-f5014057fb38.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-17T06:44:04.626Z","updatedAt":"2026-08-17T06:44:04.626Z","publishedAt":"2026-08-17T06:44:04.619Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://nitinsangwan.com/","categories":[{"id":"6a730e3d-bdf2-42a2-ab42-eee5ef39b694","name":"Portfolio","slug":"portfolio"},{"id":"cb1ce5d0-8749-428e-b0d8-917786928ffd","name":"Personal","slug":"personal"},{"id":"b65821c4-e205-4861-a28b-1623536037f7","name":"Landing Page","slug":"landing-page"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-17T06:44:05.222Z","updatedAt":"2026-08-17T06:44:05.222Z"},{"id":"01a00e11-25cf-7119-91d4-0596824f45e9","title":null,"body":"

🚀 The new Hunar.ai website is live!

We’ve been working on a new digital home for Hunar, a company building AI for the frontline workforce.

The goal was simple: make a complex product feel clear, approachable, and a little more fun to explore.

From the story and messaging to the interactions, motion, and visual system, I got to design and build this from the ground up in Framer.

A lot of iterations, tiny details, and late-night tweaks went into this one.

Would love to hear what you think 👇

→ https://hunar.ai

Built with Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" The new "},{"type":"text","text":"Hunar.ai","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://Hunar.ai","target":"_blank"}}]},{"type":"text","text":" website is live!"}]},{"type":"paragraph","content":[{"type":"text","text":"We’ve been working on a new digital home for Hunar, a company building AI for the frontline workforce."}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: make a complex product feel clear, approachable, and a little more fun to explore."}]},{"type":"paragraph","content":[{"type":"text","text":"From the story and messaging to the interactions, motion, and visual system, I got to design and build this from the ground up in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"A lot of iterations, tiny details, and late-night tweaks went into this one."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what you think "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"→ "},{"type":"text","text":"https://hunar.ai","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hunar.ai","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built with Framer."}]}]},"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"16954","resolved":true,"title":"Hunar.ai","body":"

Web design and development for Hunar.AI:

A platform that helps you make Voice AI enabled AI HRs for Hiring, Onboarding & Retention of your frontline workforce.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Web design and development for "},{"type":"text","text":"Hunar.AI:","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://Hunar.ai","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"A platform that helps you make Voice AI enabled AI HRs for Hiring, Onboarding & Retention of your frontline workforce."}]}]},"introduction":"","slug":"hunar-ai","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0d-6ff2-73e0-99ba-a80f8a1245c1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0e-a53c-714b-adeb-eacfe8c2c269.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0f-4d0a-709c-bd14-8fd779f8e77c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72406c5b-eb57-4fe8-a22c-20d8aee6f952/01a00e0f-f2d2-755a-858e-3c96cb1b34a6.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-17T04:53:19.267Z","updatedAt":"2026-08-17T04:53:19.267Z","publishedAt":"2026-08-17T04:53:19.262Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://hunar.ai/","categories":[{"id":"ddd39099-5b17-42e0-b333-7b7c480a114f","name":"Business","slug":"business"},{"id":"0539c25a-136d-4f8b-a2e7-342a21b7d607","name":"AI","slug":"ai"},{"id":"1fec15c2-ca4a-4d52-bf3a-c04e6d002202","name":"SaaS","slug":"saas"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-17T04:53:19.951Z","updatedAt":"2026-08-17T04:53:19.951Z"},{"id":"019df7be-135b-751d-ad13-80f6b4c82c72","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ABFbHkoQZatxHaBX3VPA","resolved":true,"title":"File Input","body":"$63","bodyJson":null,"introduction":"File Upload Component for Framer","slug":"file-input","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ABFbHkoQZatxHaBX3VPA/file-input-hwjzkztEFt0K9iTKnjyfoxWXkI4Ra2","metadata":{"tint":{"h":194,"s":93,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-20T13:04:11.188Z","updatedAt":"2026-05-05T09:53:39.443Z","publishedAt":"2026-05-05T10:45:22.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://file-input.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_B9o8nJ2dQUQ7ziVjqWmgiQGpnfkG8LxU8OMnj1KxXdh","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"hyMl3g3Cm1s4wYN6fbb9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-05T10:45:22.395Z","updatedAt":"2026-05-05T10:45:22.395Z"},{"id":"019d6c98-ca03-7d2e-a23b-74ee19c532ef","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ofEsr9SfKetpelnm6nnp","resolved":true,"title":"Graph Canvas","body":"$64","bodyJson":null,"introduction":"An interactive force-directed node graph","slug":"graph-canvas","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ofEsr9SfKetpelnm6nnp/graph-canvas-Ujhnm5EIBpOjmzRCC66CJCDwxnmEMc","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-27T12:21:08.210Z","updatedAt":"2026-04-08T07:36:37.434Z","publishedAt":"2026-04-08T10:17:25.763Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactive-nodes.framer.website","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_EUgMb2WFjTakJlpUkW1ScXpoJpJnwS5f1M0lY1b7DTp","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"KyRx0von6FdjiBncj1TD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T10:17:25.763Z","updatedAt":"2026-04-08T10:17:25.763Z"},{"id":"0199cd2e-bdae-7de8-804a-9a8dff74928b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"8816","resolved":true,"title":"Dimore surfaces","body":null,"bodyJson":null,"introduction":"Dimore is an award-winning design-first surface company. Rooted in Italian craftsmanship, they create refined surfaces that elevate your spaces. They wanted website that felt as clean, and minimal as their philosophy. \n","slug":"dimore-surfaces","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/8816/thumbnail-OvKtlKeQLq22rGFFxSwU4W4zt2Pvji.jpg","metadata":{"tint":{"h":0,"s":17,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-10T08:13:36.549Z","updatedAt":"2025-10-10T08:13:36.549Z","publishedAt":"2025-10-10T08:13:36.558Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://dimoresurfaces.it/","categories":[],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-10T08:13:36.558Z","updatedAt":"2025-10-10T08:13:36.558Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]