5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Td16,

PublishedDate Component

Display relative timestamps like “5 hours ago”, “2 weeks ago”, or “3 months ago” just like YouTube’s posted dates. Perfect for blogs, video platforms, news sites, and apps that need dynamic date display.

The Time Ago Component brings YouTube-style date functionality to your Framer projects. Instead of showing static dates, it automatically calculates and displays relative time (e.g. “posted 5 hours ago” or “published 2 months ago”).

This component updates seamlessly based on the current time, making your projects feel modern, dynamic, and user-friendly. Whether you’re building a content platform, blog, news portal, or social app, this component keeps your UI fresh and engaging without manual updates.

Key Features

🔄 Automatic relative time calculation — no manual updates needed.
⏰ Multiple time ranges supported — minutes, hours, days, weeks, months, years.
🧠 Smart plural handling — “1 day ago” vs. “2 days ago.”
🎨 Lightweight design — styled to look simple and readable like YouTube.
🔌 Reusable — just pass a publishedDate property, and it works instantly.
🛠 Customizable — easily style fonts, colors, and placement to match your brand.

💡 Use Cases

📺 Video platforms — show when a video was posted (YouTube-like).
📰 Blogs & News sites — keep readers updated with “Published 3 hours ago.”
📱 Social media apps — display user post timestamps dynamically.
🛒 E-commerce product updates — “Added 2 weeks ago” or “Back in stock 3 days ago.”
🎤 Podcasts or event listings — “Episode uploaded 1 month ago.”

Why This Component?

Instead of showing boring, static dates, give your users human-friendly, real-time posted dates that create trust and urgency. People love knowing how “fresh” content is, this simple feature boosts engagement across blogs, apps, and platforms.

🔧 Technical Details

Input: publishedDate (Date format)
Output: Text displaying relative time
Updates automatically on reload/visit
Built for Framer, no external dependencies

📦 What’s Included

The Time Ago Component
Lifetime updates

🎯 Applications

Content creators who want their websites to feel like YouTube/Twitter.
Agencies building blogs, video sites, or social platforms for clients.
E-commerce brands wanting fresher UI with relative product timestamps.
Developers/designers who want a ready-made drop-in solution.

✨ With this component, your projects feel alive, modern, and always up to date, just like the big platforms people love.

5a:[["$","$L5d",null,{"post":{"id":"01995a61-f179-7ad4-94c0-bd618c987a45","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b48558b2-a5e5-4ab2-abde-c5b8e121b9c3","name":"Sadiq Abdulqudus","slug":"pixelvox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b48558b2-a5e5-4ab2-abde-c5b8e121b9c3/zppyoafa","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"FDkZe3T2Fflc5rt2VXRk","resolved":true,"title":"PublishedDate","body":"$5e","bodyJson":null,"introduction":"","slug":"publisheddate","author":{"framerUserId":"b48558b2-a5e5-4ab2-abde-c5b8e121b9c3","name":"Sadiq Abdulqudus","slug":"pixelvox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b48558b2-a5e5-4ab2-abde-c5b8e121b9c3/zppyoafa","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/FDkZe3T2Fflc5rt2VXRk/publisheddate-GNSE6PvPul0Zwl2kVxzvforSudQjyz","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-09T01:12:41.280Z","updatedAt":"2025-09-17T16:37:54.486Z","publishedAt":"2025-09-18T01:13:12.313Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/TimeAgo-1-CGMZ.js@CyZKUZexKl06Sscbxjnl","previewUrl":"https://appreciated-innovation-860552.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"CyZKUZexKl06Sscbxjnl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-18T01:13:12.313Z","updatedAt":"2025-09-18T01:13:12.313Z","reported":false}}],"$L5f"]

Suggested for you