{"id":14384996,"url":"https://github.com/gre/diaporama-react","last_synced_at":"2025-07-20T02:11:57.452Z","repository":{"id":27367962,"uuid":"30843449","full_name":"gre/diaporama-react","owner":"gre","description":"Diaporama component for React","archived":false,"fork":false,"pushed_at":"2016-06-21T10:22:51.000Z","size":14,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-20T00:41:22.088Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://github.com/gre/diaporama","language":"JavaScript","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/gre.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}},"created_at":"2015-02-15T21:46:58.000Z","updated_at":"2024-02-28T04:49:31.000Z","dependencies_parsed_at":"2022-07-24T15:01:51.706Z","dependency_job_id":null,"html_url":"https://github.com/gre/diaporama-react","commit_stats":null,"previous_names":["glslio/diaporama-react"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fdiaporama-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gre","download_url":"https://codeload.github.com/gre/diaporama-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245435049,"owners_count":20614818,"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":[],"created_at":"2024-08-28T18:01:50.889Z","updated_at":"2025-03-25T09:30:52.536Z","avatar_url":"https://github.com/gre.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"diaporama-react\n=========\n\nImplement a React Component to use the [diaporama](https://github.com/gre/diaporama) library.\n\n[![](https://nodei.co/npm/diaporama-react.png)](https://www.npmjs.com/package/diaporama-react)\n\n\n```jsx\n{\n    data: PropTypes.object.isRequired,\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    resolution: PropTypes.number,\n    paused: PropTypes.bool,\n    loop: PropTypes.bool,\n    autoplay: PropTypes.bool,\n    currentTime: PropTypes.number,\n    playbackRate: PropTypes.number,\n    onDiaporamaCreated: PropTypes.func // callback giving the diaporama instance. use-case: You can bind Events on the diaporama. See \"diaporama\" documentation.\n}\n```\n\nUsage\n-----\n\n## app.js\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Diaporama from 'diaporama-react';\n\nconst diaporamaData = require('./diaporama.json');\n\nlet props = {\n    data: diaporamaData,\n    width: 320,\n    height: 240,\n    loop: true,\n    autoplay: true,\n    onDiaporamaCreated: (...args) =\u003e {\n      console.log('onDiaporamaCreated', args);\n    }\n}\n\nReactDOM.render(\u003cDiaporama {...props}/\u003e, document.getElementById('app'));\n\n```\n\n\n## diaporama.json\n\nFollowing the [diaporama JSON description schema](https://gre.gitbooks.io/diaporama/content/docs/format.html)\n\n```json\n{\n  \"timeline\": [\n    {\n      \"image\": \"https://crossorigin.me/http://loremflickr.com/320/240/paris\",\n      \"duration\": 2000,\n      \"kenburns\": {\n        \"from\": [ 0.5, [0.5, 0.6] ],\n        \"to\": [ 1, [0.5, 0.6] ]\n      },\n      \"transitionNext\": {\n        \"name\": \"PageCurl\",\n        \"duration\": 1000\n      }\n    },{\n      \"image\": \"https://crossorigin.me/http://loremflickr.com/320/240/berlin\",\n      \"duration\": 2000,\n      \"kenburns\": {\n        \"from\": [ 0.5, [0.5, 0.6] ],\n        \"to\": [ 1, [0.5, 0.6] ]\n      },\n      \"transitionNext\": {\n        \"name\": \"PageCurl\",\n        \"duration\": 1000\n      }\n    },{\n      \"image\": \"https://crossorigin.me/http://loremflickr.com/320/240/barcelona\",\n      \"duration\": 2000,\n      \"kenburns\": {\n        \"from\": [ 0.5, [0.5, 0.6] ],\n        \"to\": [ 1, [0.5, 0.6] ]\n      },\n      \"transitionNext\": {\n        \"name\": \"PageCurl\",\n        \"duration\": 1000\n      }\n    }\n  ],\n  \"transitions\": [\n    {\n      \"glsl\": \"\\n#ifdef GL_ES\\nprecision highp float;\\n#endif\\nuniform sampler2D from,to;uniform float progress;uniform vec2 resolution;const float MIN_AMOUNT=-0.16;const float MAX_AMOUNT=1.3;float amount=progress*(MAX_AMOUNT-MIN_AMOUNT)+MIN_AMOUNT;const float PI=3.141592653589793;const float scale=512.0;const float sharpness=3.0;float cylinderCenter=amount;float cylinderAngle=2.0*PI*amount;const float cylinderRadius=1.0/PI/2.0;vec3 hitPoint(float hitAngle,float yc,vec3 point,mat3 rrotation){float hitPoint=hitAngle/(2.0*PI);point.y=hitPoint;return rrotation*point;}vec4 antiAlias(vec4 color1,vec4 color2,float distanc){distanc*=scale;if(distanc\u003c0.0) return color2;if(distanc\u003e2.0) return color1;float dd=pow(1.0-distanc/2.0,sharpness);return ((color2-color1)*dd)+color1;}float distanceToEdge(vec3 point){float dx=abs(point.x\u003e0.5?1.0-point.x:point.x);float dy=abs(point.y\u003e0.5?1.0-point.y:point.y);if(point.x\u003c0.0) dx=-point.x;if(point.x\u003e1.0) dx=point.x-1.0;if(point.y\u003c0.0) dy=-point.y;if(point.y\u003e1.0) dy=point.y-1.0;if((point.x\u003c0.0||point.x\u003e1.0)\u0026\u0026(point.y\u003c0.0||point.y\u003e1.0)) return sqrt(dx*dx+dy*dy);return min(dx,dy);}vec4 seeThrough(float yc,vec2 p,mat3 rotation,mat3 rrotation){float hitAngle=PI-(acos(yc/cylinderRadius)-cylinderAngle);vec3 point=hitPoint(hitAngle,yc,rotation*vec3(p,1.0),rrotation);if(yc\u003c=0.0\u0026\u0026(point.x\u003c0.0||point.y\u003c0.0||point.x\u003e1.0||point.y\u003e1.0)){vec2 texCoord=gl_FragCoord.xy/resolution.xy;return texture2D(to,texCoord);}if(yc\u003e0.0) return texture2D(from,p);vec4 color=texture2D(from,point.xy);vec4 tcolor=vec4(0.0);return antiAlias(color,tcolor,distanceToEdge(point));}vec4 seeThroughWithShadow(float yc,vec2 p,vec3 point,mat3 rotation,mat3 rrotation){float shadow=distanceToEdge(point)*30.0;shadow=(1.0-shadow)/3.0;if(shadow\u003c0.0) shadow=0.0;else shadow*=amount;vec4 shadowColor=seeThrough(yc,p,rotation,rrotation);shadowColor.r-=shadow;shadowColor.g-=shadow;shadowColor.b-=shadow;return shadowColor;}vec4 backside(float yc,vec3 point){vec4 color=texture2D(from,point.xy);float gray=(color.r+color.b+color.g)/15.0;gray+=(8.0/10.0)*(pow(1.0-abs(yc/cylinderRadius),2.0/10.0)/2.0+(5.0/10.0));color.rgb=vec3(gray);return color;}vec4 behindSurface(float yc,vec3 point,mat3 rrotation){float shado=(1.0-((-cylinderRadius-yc)/amount*7.0))/6.0;shado*=1.0-abs(point.x-0.5);yc=(-cylinderRadius-cylinderRadius-yc);float hitAngle=(acos(yc/cylinderRadius)+cylinderAngle)-PI;point=hitPoint(hitAngle,yc,point,rrotation);if(yc\u003c0.0\u0026\u0026point.x\u003e=0.0\u0026\u0026point.y\u003e=0.0\u0026\u0026point.x\u003c=1.0\u0026\u0026point.y\u003c=1.0\u0026\u0026(hitAngle\u003cPI||amount\u003e0.5)){shado=1.0-(sqrt(pow(point.x-0.5,2.0)+pow(point.y-0.5,2.0))/(71.0/100.0));shado*=pow(-yc/cylinderRadius,3.0);shado*=0.5;}else{shado=0.0;}vec2 texCoord=gl_FragCoord.xy/resolution.xy;return vec4(texture2D(to,texCoord).rgb-shado,1.0);}void main(){vec2 texCoord=gl_FragCoord.xy/resolution.xy;const float angle=30.0*PI/180.0;float c=cos(-angle);float s=sin(-angle);mat3 rotation=mat3(c,s,0,-s,c,0,0.12,0.258,1);c=cos(angle);s=sin(angle);mat3 rrotation=mat3(c,s,0,-s,c,0,0.15,-0.5,1);vec3 point=rotation*vec3(texCoord,1.0);float yc=point.y-cylinderCenter;if(yc\u003c-cylinderRadius){gl_FragColor=behindSurface(yc,point,rrotation);return;}if(yc\u003ecylinderRadius){gl_FragColor=texture2D(from,texCoord);return;}float hitAngle=(acos(yc/cylinderRadius)+cylinderAngle)-PI;float hitAngleMod=mod(hitAngle,2.0*PI);if((hitAngleMod\u003ePI\u0026\u0026amount\u003c0.5)||(hitAngleMod\u003ePI/2.0\u0026\u0026amount\u003c0.0)){gl_FragColor=seeThrough(yc,texCoord,rotation,rrotation);return;}point=hitPoint(hitAngle,yc,point,rrotation);if(point.x\u003c0.0||point.y\u003c0.0||point.x\u003e1.0||point.y\u003e1.0){gl_FragColor=seeThroughWithShadow(yc,texCoord,point,rotation,rrotation);return;}vec4 color=backside(yc,point);vec4 otherColor;if(yc\u003c0.0){float shado=1.0-(sqrt(pow(point.x-0.5,2.0)+pow(point.y-0.5,2.0))/0.71);shado*=pow(-yc/cylinderRadius,3.0);shado*=0.5;otherColor=vec4(0.0,0.0,0.0,shado);}else{otherColor=texture2D(from,texCoord);}color=antiAlias(color,otherColor,cylinderRadius-abs(yc));vec4 cl=seeThroughWithShadow(yc,texCoord,point,rotation,rrotation);float dist=distanceToEdge(point);gl_FragColor=antiAlias(color,cl,dist);}\",\n      \"uniforms\": {},\n      \"name\": \"PageCurl\"\n    }\n  ]\n}\n```\n\n\nRelated Projects\n---------------\n\n- [`diaporama`](https://github.com/gre/diaporama): Image/video/content slideshow engine providing high quality animation effects \n- [`diaporama-maker`](https://github.com/gre/diaporama-maker): application to create Diaporama slideshows.\n- [`kenburns`](http://github.com/gre/kenburns): KenBurns effect for the Web.\n- [`glsl-transition`](https://github.com/glslio/glsl-transition): Perform a GLSL Transition.\n- [`slide2d`](https://github.com/gre/slide2d): Express vectorial content in JSON using canvas2d directives.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fdiaporama-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgre%2Fdiaporama-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fdiaporama-react/lists"}