5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T719,

A timeline for Framer that reads its own dates. Type them the way people write them, 2019, March 2021, Q3 2024, 12 June 2024 or 2021 - Present, and it puts the entries in order, oldest or newest first, and writes each into the page as a real date.

After the page loads, a Today marker appears between what has happened and what is planned, from the visitor's own date. A roadmap entry turns from planned to current to done as its dates pass, with no edit, and a role that runs 2021 - Present reads as current. Planned entries draw a hollow dot and a dashed line.

It is an ordered list with real headings, and every entry is in the page's HTML before any script runs. Screen readers hear which entries are planned and which are now.

Alternating or line left, with dates beside or above, cards or plain text, and a layout of its own below a width you choose: the component's own width, not the screen's, so it restacks in a narrow column too. The line draws itself as the page is read, and stands still for visitors who ask for less motion.

Each entry takes a date, a title, text, a tag, a highlight and a link to a page of your site, a web address, an email or a phone. A date it cannot read stays where you wrote it and is never marked done or planned, with a warning on the canvas. Fonts, spacing, dot and line sizes and every colour are controls.

After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev

5a:[["$","$L5d",null,{"post":{"id":"01a0d94b-e03f-7078-9717-86329da4d2f9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[],"resources":[{"id":"5aisZ0hxaaRo575J7jV9","resolved":true,"title":"Mile Marker","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A timeline for Framer that reads its own dates. Type them the way people write them, 2019, March 2021, Q3 2024, 12 June 2024 or 2021 - Present, and it puts the entries in order, oldest or newest first, and writes each into the page as a real date."}]},{"type":"paragraph","content":[{"type":"text","text":"After the page loads, a Today marker appears between what has happened and what is planned, from the visitor's own date. A roadmap entry turns from planned to current to done as its dates pass, with no edit, and a role that runs 2021 - Present reads as current. Planned entries draw a hollow dot and a dashed line."}]},{"type":"paragraph","content":[{"type":"text","text":"It is an ordered list with real headings, and every entry is in the page's HTML before any script runs. Screen readers hear which entries are planned and which are now."}]},{"type":"paragraph","content":[{"type":"text","text":"Alternating or line left, with dates beside or above, cards or plain text, and a layout of its own below a width you choose: the component's own width, not the screen's, so it restacks in a narrow column too. The line draws itself as the page is read, and stands still for visitors who ask for less motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Each entry takes a date, a title, text, a tag, a highlight and a link to a page of your site, a web address, an email or a phone. A date it cannot read stays where you wrote it and is never marked done or planned, with a warning on the canvas. Fonts, spacing, dot and line sizes and every colour are controls."}]},{"type":"paragraph","content":[{"type":"text","text":"After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it."}]},{"type":"paragraph","content":[{"type":"text","text":"Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev"}]}]},"introduction":"Dated timeline with a Today marker","slug":"mile-marker","author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/01a0d949-9a67-71c6-adec-2d4b70e3a0bb.jpg","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T16:00:23.000Z","updatedAt":"2026-09-25T16:00:23.000Z","publishedAt":"2026-09-25T16:00:22.997Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://safe-book-192450.framer.app/mile-marker","price":"12","paymentUrl":"https://buy.polar.sh/polar_cl_LBLhlxaH4XW0GDansUvYLz0MNCeXt2Vn3d4Ch3chwFM","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"g9H9XALV4Pov2YHhx0C3","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":"2026-09-25T16:00:23.616Z","updatedAt":"2026-09-25T16:00:23.616Z","reported":false}}],"$L5f"]

Suggested for you