{"id":13800587,"url":"https://github.com/Quamolit/quamolit","last_synced_at":"2025-05-13T09:31:46.319Z","repository":{"id":7865460,"uuid":"341102081","full_name":"Quamolit/quamolit","owner":"Quamolit","description":"Experimental canvas animation library with persistent data at core","archived":false,"fork":false,"pushed_at":"2024-04-01T07:31:27.000Z","size":3408,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-20T06:03:35.417Z","etag":null,"topics":["animation","canvas"],"latest_commit_sha":null,"homepage":"http://r.quamolit.org/quamolit.calcit/","language":"Cirru","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Quamolit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-22T06:30:44.000Z","updated_at":"2023-09-07T03:30:28.000Z","dependencies_parsed_at":"2024-01-05T21:52:29.818Z","dependency_job_id":"976ee123-7039-4bf3-ad83-ff9cd35d439d","html_url":"https://github.com/Quamolit/quamolit","commit_stats":{"total_commits":69,"total_committers":2,"mean_commits":34.5,"dds":0.01449275362318836,"last_synced_commit":"4b139a6254347325fdc0f3ea7caaa6b2b6db54be"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quamolit%2Fquamolit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quamolit%2Fquamolit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quamolit%2Fquamolit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quamolit%2Fquamolit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Quamolit","download_url":"https://codeload.github.com/Quamolit/quamolit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253913196,"owners_count":21983273,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas"],"created_at":"2024-08-04T00:01:14.004Z","updated_at":"2025-05-13T09:31:45.029Z","avatar_url":"https://github.com/Quamolit.png","language":"Cirru","funding_links":[],"categories":["Awesome ClojureScript"],"sub_categories":["Canvas"],"readme":"\nQuamolit in calcit-js\n----\n\n\u003e what if we describe UI transitions in React's way? Previously written in [ClojureScript](https://github.com/Quamolit/quamolit.cljs).\n\nDemo http://r.Quamolit.org/quamolit.calcit/\n\nFeatures:\n\n* declarative component markups for Canvas\n* React-like components, element DSLs, event handlers, global Store\n* animation abstractions\n\n### Design\n\nQuamolit is trying to combine two things:\n\n* declarative programming experience like React\n* canvas API drawing and animations\n\nSeeing from MVC, animations has Models too. Said by FRP(Functional Reactive Programming), the Model for animations is values changing over time, like a stream. It does have a Model, a Model for animations. But we want to program in a declarative way, which means we need that Model to be generated from our code. Meanwhile CSS animations is not we want because of the private animation states, we need global app state. So question, how to expression a time varying Model with declarative code?\n\n### Usage\n\nDefine components:\n\n```cirru\ndefcomp comp-demo ()\n  group ({})\n\ndefcomp comp-demo-tick (states)\n  let\n      cursor $ :cursor states\n      state $ or (:data states) {} (:demo :demo)\n    []\n      fn (elapsed d!)\n        ; \"this is there you handle animation states\"\n        d! cursor (merge state state-changes)\n      group ({})\n        group ({})\n```\n\nIt requires some boilerplate code to start a Quamolit project. I would suggest starting by forking my [workflow](https://github.com/Quamolit/quamolit-workflow).\n\n### Component Specs\n\nShape records:\n\n* `name` keyword\n* `props` a hashmap of:\n* * `...` styles used in Canvas API\n* * `event` a hashmap of events, mainly `:click` events\n* `children` sorted hashmap with values of child nodes\n\nComponent record:\n\n* `name` keyword\n* `on-tick` function to update animation state at every tick\n* `tree` cached from render tree\n\n### Paint Elements\n\n```cirru\nline $ {}\n  :x0 0\n  :y0 0\n  :x1 40\n  :y1 40\n  :line-width 4\n  :stroke-style (hsl 200 870 50)\n  :line-cap :round\n  :line-join :round\n  :milter-limit 8\n\narc $ {}\n  :x 0 :y 0:r 40\n  :s-angle 0\n  :e-angle 60\n  :line-width 4\n  :counterclockwise true\n  :line-cap :round\n  :line-join :round\n  :miter-limit 8\n  :fill-style nil\n  :stroke-style nil\n\nrect $ {}\n  :w 100\n  :h 40\n  :x $ - (/ w 2)\n  :y $ - (/ h 2)\n  :line-width 2\n\ntext $ {}\n  :x 0\n  :y 0\n  :fill-style (hsl 0 0 0)\n  :text-align :center\n  :base-linee :middle\n  :size 20\n  :font-family |Optima\n  :max-width 400\n  :text |todo\n\nimage $ {}\n  :src \"|lotus.jpg\"\n  :sx 0\n  :sy 0\n  :sw 40\n  :sh 40\n  :dx 0\n  :dy 0\n  :dw 40\n  :dh 40\n```\n\n### Paint Components\n\n```cirru\ntranslate $ {}\n  :x 0\n  :y 0\n\nscale $ {}\n  :ratio 1.2\n\nalpha $ {}\n  :opacity 0.5\n\nrotate $ {}\n  :angle 30\n\nbutton $ {}\n  :x 0\n  :y 0\n  :w 100\n  :h 40\n  :text \"|button\"\n  :surface-color (hsl 0 80 80)\n  :text-color (hsl 0 0 10)\n  :font-family \"|Optima\"\n  :font-size 20\n\ninput $ {}\n  :w 0\n  :h 0\n  :text \"|TODO\"\n\ncomp-debug data $ {}\n\n\ncomp-slider (\u003e\u003e states :v)\n  {}\n    :value $ :v state\n    :unit 0.2\n    :on-change $ fn (v d!)\n      d! cursor $ assoc state :v v\n    :position $ [] 100 40\n    :min -4\n    :max 40\n    :title \"\\\"long long title\"\n```\n\n### HUD logs\n\n```cirru\n:require\n  quamolit.hud-logs :refer $ hud-log\n\nhug-log :data \"|more data\"\n```\n\n### Develop\n\nTo run this project, with [calcit_runner](https://github.com/calcit-lang/calcit_runner.rs) and [Vite](https://vitejs.dev/):\n\n```bash\nyarn\ncr --emit-js --once\nyarn vite\n```\n\n### History\n\nBy rethinking MVC and GUI during using React, I developed the need of writing animations with declarative code. It was late 2014. I created the first prototype with CoffeeScript but it's not viable. In early 2016, I rewrote it with ClojureScript, which is last version of Quamolit. Now it's being rewritten in calcit-js.\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQuamolit%2Fquamolit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FQuamolit%2Fquamolit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQuamolit%2Fquamolit/lists"}