{"id":29640784,"url":"https://github.com/sans-script/resizable-layout","last_synced_at":"2025-07-21T21:05:15.187Z","repository":{"id":303837968,"uuid":"1016854937","full_name":"sans-script/resizable-layout","owner":"sans-script","description":"Resizable Layout is a flexible and customizable layout with resizable panels. It allows users to adjust the size of different sections of the interface by dragging the panel dividers, providing a dynamic and user-friendly experience.","archived":false,"fork":false,"pushed_at":"2025-07-09T18:04:04.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-10T01:21:14.461Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sans-script.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,"zenodo":null}},"created_at":"2025-07-09T16:19:03.000Z","updated_at":"2025-07-09T18:07:50.000Z","dependencies_parsed_at":"2025-07-10T01:21:53.274Z","dependency_job_id":"a7a2b37a-b67c-42f0-a640-fff2662d34a5","html_url":"https://github.com/sans-script/resizable-layout","commit_stats":null,"previous_names":["sans-script/resizable-layout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sans-script/resizable-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fresizable-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fresizable-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fresizable-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fresizable-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sans-script","download_url":"https://codeload.github.com/sans-script/resizable-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fresizable-layout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266379310,"owners_count":23920157,"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","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-07-21T21:05:04.986Z","updated_at":"2025-07-21T21:05:15.179Z","avatar_url":"https://github.com/sans-script.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resizable Layout\n\nResizable Layout is a flexible and customizable layout with resizable panels. It allows users to adjust the size of different sections of the interface by dragging the panel dividers, providing a dynamic and user-friendly experience.\nVisit the website, open the DevTools console and run these scripts to see the layout animations in action. Enjoy the results :D\n\n### 1. Synchronized Pulse (all panels grow and shrink together)\n\n````javascript\nfunction animatePulse() {\n    if (\n        typeof window.setSidebarWidth !== \"function\" ||\n        typeof window.setEditorWidth !== \"function\" ||\n        typeof window.setInputHeight !== \"function\"\n    ) return alert(\"Global functions not found!\");\n\n    let t = 0, running = true;\n    function lerp(a, b, t) { return a + (b - a) * t; }\n    function loop() {\n        if (!running) return;\n        const s = (Math.sin(t) + 1) / 2;\n        window.setSidebarWidth(lerp(10, 30, s));\n        window.setEditorWidth(lerp(20, 80, s));\n        window.setInputHeight(lerp(10, 60, s));\n        t += 0.025;\n        requestAnimationFrame(loop);\n    }\n    loop();\n    window.stopSatisfyingLayoutAnimation = () =\u003e { running = false; };\n}\nanimatePulse();\n````\n\n---\n\n### 2. \"Wave\" Effect (each panel oscillates with a different phase)\n\n````javascript\nfunction animateWave() {\n    if (\n        typeof window.setSidebarWidth !== \"function\" ||\n        typeof window.setEditorWidth !== \"function\" ||\n        typeof window.setInputHeight !== \"function\"\n    ) return alert(\"Global functions not found!\");\n\n    let t = 0, running = true;\n    function lerp(a, b, t) { return a + (b - a) * t; }\n    function loop() {\n        if (!running) return;\n        window.setSidebarWidth(lerp(10, 30, (Math.sin(t) + 1) / 2));\n        window.setEditorWidth(lerp(0, 100, (Math.sin(t + 1) + 1) / 2));\n        window.setInputHeight(lerp(0, 60, (Math.sin(t + 2) + 1) / 2));\n        t += 0.03;\n        requestAnimationFrame(loop);\n    }\n    loop();\n    window.stopSatisfyingLayoutAnimation = () =\u003e { running = false; };\n}\nanimateWave();\n````\n\n---\n\n### 3. \"Bounce\" (each panel goes from min to max and back, one at a time)\n\n````javascript\nfunction animateBounce() {\n    if (\n        typeof window.setSidebarWidth !== \"function\" ||\n        typeof window.setEditorWidth !== \"function\" ||\n        typeof window.setInputHeight !== \"function\"\n    ) return alert(\"Global functions not found!\");\n\n    let t = 0, running = true;\n    function lerp(a, b, t) { return a + (b - a) * t; }\n    function loop() {\n        if (!running) return;\n        const phase = (t % 3);\n        if (phase \u003c 1) {\n            window.setSidebarWidth(lerp(10, 30, phase));\n            window.setEditorWidth(50);\n            window.setInputHeight(30);\n        } else if (phase \u003c 2) {\n            window.setSidebarWidth(30);\n            window.setEditorWidth(lerp(0, 100, phase - 1));\n            window.setInputHeight(30);\n        } else {\n            window.setSidebarWidth(30);\n            window.setEditorWidth(100);\n            window.setInputHeight(lerp(0, 60, phase - 2));\n        }\n        t += 0.02;\n        requestAnimationFrame(loop);\n    }\n    loop();\n    window.stopSatisfyingLayoutAnimation = () =\u003e { running = false; };\n}\nanimateBounce();\n````\n\n---\n\n### 4. \"Smooth Random\" (values smoothly change to random targets)\n\n````javascript\nfunction animateRandomSmooth() {\n    if (\n        typeof window.setSidebarWidth !== \"function\" ||\n        typeof window.setEditorWidth !== \"function\" ||\n        typeof window.setInputHeight !== \"function\"\n    ) return alert(\"Global functions not found!\");\n\n    let running = true;\n    let sidebar = 15, editor = 50, input = 30;\n    let targetSidebar = 15, targetEditor = 50, targetInput = 30;\n\n    function randomizeTargets() {\n        targetSidebar = 10 + Math.random() * 20;\n        targetEditor = Math.random() * 100;\n        targetInput = Math.random() * 60;\n    }\n\n    setInterval(randomizeTargets, 2000);\n\n    function loop() {\n        if (!running) return;\n        sidebar += (targetSidebar - sidebar) * 0.05;\n        editor += (targetEditor - editor) * 0.05;\n        input += (targetInput - input) * 0.05;\n        window.setSidebarWidth(sidebar);\n        window.setEditorWidth(editor);\n        window.setInputHeight(input);\n        requestAnimationFrame(loop);\n    }\n    loop();\n    window.stopSatisfyingLayoutAnimation = () =\u003e { running = false; };\n}\nanimateRandomSmooth();\n````\n\n---\n\n\u003e [!TIP]\n\u003e You can run one animation at a time. To stop any animation, execute:\n\n```javascript\nwindow.stopSatisfyingLayoutAnimation()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fresizable-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsans-script%2Fresizable-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fresizable-layout/lists"}